fix: rename src to avatarUrl in collaborator (#5177)

* fix: rename  to  in collaborator

* update pr link

* fallback to intials on image error

src/actions/actionNavigate.tsx

@@ -50,7 +50,7 @@ export const actionGoToCollaborator = register({
         border={stroke}
         onClick={() => updateData(collaborator.pointer)}
         name={collaborator.username || ""}
-        src={collaborator.src}
+        src={collaborator.avatarUrl}
       />
     );
   },

src/components/Avatar.tsx

@@ -1,6 +1,6 @@
 import "./Avatar.scss";
 
-import React from "react";
+import React, { useState } from "react";
 import { getClientInitials } from "../clients";
 
 type AvatarProps = {
@@ -13,13 +13,21 @@ type AvatarProps = {
 
 export const Avatar = ({ color, border, onClick, name, src }: AvatarProps) => {
   const shortName = getClientInitials(name);
-  const style = src
+  const [error, setError] = useState(false);
+  const loadImg = !error && src;
+  const style = loadImg
     ? undefined
     : { background: color, border: `1px solid ${border}` };
   return (
     <div className="Avatar" style={style} onClick={onClick}>
-      {src ? (
+      {loadImg ? (
-        <img className="Avatar-img" src={src} alt={shortName} />
+        <img
+          className="Avatar-img"
+          src={src}
+          alt={shortName}
+          referrerPolicy="no-referrer"
+          onError={() => setError(true)}
+        />
       ) : (
         shortName
       )}

src/packages/excalidraw/CHANGELOG.md

@@ -25,7 +25,7 @@ Please add the latest change on the top under the correct section.
 
 - Exported [`loadSceneOrLibraryFromBlob`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#loadSceneOrLibraryFromBlob) function [#5057](https://github.com/excalidraw/excalidraw/pull/5057).
 - Export [`MIME_TYPES`](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L92) supported by Excalidraw [#5135](https://github.com/excalidraw/excalidraw/pull/5135).
-- Support [`src`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L50) for collaborators. Now onwards host can pass `src` to render the customized avatar for collaborators [#5114](https://github.com/excalidraw/excalidraw/pull/5114).
+- Support [`avatarUrl`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L50) for collaborators. Now onwards host can pass `avatarUrl` to render the customized avatar for collaborators [#5114](https://github.com/excalidraw/excalidraw/pull/5114), renamed in [#5177](https://github.com/excalidraw/excalidraw/pull/5177).
 - Support `libraryItems` argument in `initialData.libraryItems` and `updateScene({ libraryItems })` to be a Promise resolving to `LibraryItems`, and support functional update of `libraryItems` in [`updateScene({ libraryItems })`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#updateScene). [#5101](https://github.com/excalidraw/excalidraw/pull/5101).
 - Expose util [`mergeLibraryItems`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#mergeLibraryItems) [#5101](https://github.com/excalidraw/excalidraw/pull/5101).
 - Expose util [`exportToClipboard`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exportToClipboard) which allows to copy the scene contents to clipboard as `svg`, `png` or `json` [#5103](https://github.com/excalidraw/excalidraw/pull/5103).

src/packages/excalidraw/example/App.js

@@ -487,15 +487,19 @@ export default function App() {
                   const collaborators = new Map();
                   collaborators.set("id1", {
                     username: "Doremon",
-                    src: "doremon.png",
+                    avatarUrl: "doremon.png",
                   });
                   collaborators.set("id2", {
                     username: "Excalibot",
-                    src: "https://avatars.githubusercontent.com/excalibot",
+                    avatarUrl: "excalibot.png",
                   });
                   collaborators.set("id3", {
                     username: "Pika",
-                    src: "pika.jpeg",
+                    avatarUrl: "pika.jpeg",
+                  });
+                  collaborators.set("id4", {
+                    username: "fallback",
+                    avatarUrl: "https://example.com",
                   });
                   excalidrawRef.current.updateScene({ collaborators });
                 } else {

src/types.ts

@@ -47,7 +47,7 @@ export type Collaborator = {
   };
   // The url of the collaborator's avatar, defaults to username intials
   // if not present
-  src?: string;
+  avatarUrl?: string;
 };
 
 export type DataURL = string & { _brand: "DataURL" };