feat: generate random username for new users during collab

package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@dwelle/browser-fs-access": "0.21.1",
+    "@excalidraw/random-username": "1.0.0",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
     "@testing-library/jest-dom": "5.11.10",

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) => {

src/excalidraw-app/collab/RoomDialog.tsx

@@ -14,6 +14,7 @@ import { t } from "../../i18n";
 import "./RoomDialog.scss";
 import Stack from "../../components/Stack";
 import { AppState } from "../../types";
+import { getRandomUsername } from "@excalidraw/random-username";
 
 const getShareIcon = () => {
   const navigator = window.navigator as any;
@@ -137,9 +138,14 @@ const RoomDialog = ({
               </label>
               <input
                 id="username"
-                value={username || ""}
+                value={username}
                 className="RoomDialog-username TextInput"
                 onChange={(event) => onUsernameChange(event.target.value)}
+                onBlur={(event) => {
+                  if (!event.target.value.trim()) {
+                    onUsernameChange(getRandomUsername());
+                  }
+                }}
                 onKeyPress={(event) => event.key === "Enter" && handleClose()}
               />
             </div>

yarn.lock

@@ -1089,6 +1089,11 @@
   version "1.0.2"
   resolved "https://registry.npmjs.org/@excalidraw/prettier-config/-/prettier-config-1.0.2.tgz"
 
+"@excalidraw/random-username@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/random-username/-/random-username-1.0.0.tgz#6d5293148aee6cd08dcdfcadc0c91276572f4499"
+  integrity sha512-pd4VapWahQ7PIyThGq32+C+JUS73mf3RSdC7BmQiXzhQsCTU4RHc8y9jBi+pb1CFV0iJXvjJRXnVdLCbTj3+HA==
+
 "@firebase/analytics-types@0.4.0":
   version "0.4.0"
   resolved "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.4.0.tgz"