feat: generate random username for new users during collab

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -41,6 +41,7 @@ import { UserIdleState } from "../../types";
 import { IDLE_THRESHOLD, ACTIVE_THRESHOLD } from "../../constants";
 import { trackEvent } from "../../analytics";
 import { isInvisiblySmallElement } from "../../element";
+import { getRandomUsername } from "@excalidraw/random-username";
 
 interface CollabState {
   modalIsShown: boolean;
@@ -109,6 +110,10 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     window.addEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload);
     window.addEventListener(EVENT.UNLOAD, this.onUnload);
 
+    if (!this.state.username) {
+      this.updateUsername(getRandomUsername());
+    }
+
     if (
       process.env.NODE_ENV === ENV.TEST ||
       process.env.NODE_ENV === ENV.DEVELOPMENT
@@ -593,7 +598,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
     this.setState({ modalIsShown: false });
   };
 
-  onUsernameChange = (username: string) => {
+  updateUsername = (username: string) => {
     this.setState({ username });
     saveUsernameToLocalStorage(username);
   };
@@ -635,7 +640,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
             handleClose={this.handleClose}
             activeRoomLink={activeRoomLink}
             username={username}
-            onUsernameChange={this.onUsernameChange}
+            onUsernameChange={this.updateUsername}
             onRoomCreate={this.openPortal}
             onRoomDestroy={this.closePortal}
             setErrorMessage={(errorMessage) => {