diff --git a/package.json b/package.json index 9c2dadac0..d2addca81 100644 --- a/package.json +++ b/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", diff --git a/src/excalidraw-app/collab/CollabWrapper.tsx b/src/excalidraw-app/collab/CollabWrapper.tsx index 89cf2c13c..0cd809909 100644 --- a/src/excalidraw-app/collab/CollabWrapper.tsx +++ b/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 { 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 { this.setState({ modalIsShown: false }); }; - onUsernameChange = (username: string) => { + updateUsername = (username: string) => { this.setState({ username }); saveUsernameToLocalStorage(username); }; @@ -635,7 +640,7 @@ class CollabWrapper extends PureComponent { handleClose={this.handleClose} activeRoomLink={activeRoomLink} username={username} - onUsernameChange={this.onUsernameChange} + onUsernameChange={this.updateUsername} onRoomCreate={this.openPortal} onRoomDestroy={this.closePortal} setErrorMessage={(errorMessage) => { diff --git a/src/excalidraw-app/collab/RoomDialog.tsx b/src/excalidraw-app/collab/RoomDialog.tsx index 0cd2f733d..ed9842ba3 100644 --- a/src/excalidraw-app/collab/RoomDialog.tsx +++ b/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 = ({ onUsernameChange(event.target.value)} + onBlur={(event) => { + if (!event.target.value.trim()) { + onUsernameChange(getRandomUsername()); + } + }} onKeyPress={(event) => event.key === "Enter" && handleClose()} /> diff --git a/yarn.lock b/yarn.lock index aa9469fec..25594483b 100644 --- a/yarn.lock +++ b/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"