feat: hide trash button during collaboration (#5037)

* feat: hide trash button during collaboration

* visually hide the trash icon

* pointer events none

* tweak env docs

* fix typo

Co-authored-by: dwelle <luzar.david@gmail.com>

.env.development

@@ -4,9 +4,10 @@ REACT_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
 REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
 REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
 
-REACT_APP_PORTAL_URL=http://localhost:3002
-# Fill to set socket server URL used for collaboration.
-# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
-REACT_APP_WS_SERVER_URL=
+# collaboration WebSocket server (https://github.com/excalidraw/excalidraw-room)
+REACT_APP_WS_SERVER_URL=http://localhost:3002
+
+# set this only if using the collaboration workflow we use on excalidraw.com
+REACT_APP_PORTAL_URL=
 
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'

public/index.html

@@ -152,8 +152,10 @@
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
+      }
 
-        @media screen and (min-width: 1200px) {
+      @media screen and (min-width: 1200px) {
+        #root {
           -webkit-touch-callout: default;
           -webkit-user-select: auto;
           -khtml-user-select: auto;

src/excalidraw-app/index.scss

@@ -26,3 +26,9 @@
     }
   }
 }
+.excalidraw-app.is-collaborating {
+  [data-testid="clear-canvas-button"] {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}

src/excalidraw-app/index.tsx

@@ -70,6 +70,7 @@ import { isInitializedImageElement } from "../element/typeChecks";
 import { loadFilesFromFirebase } from "./data/firebase";
 import { LocalData } from "./data/LocalData";
 import { isBrowserStorageStateNewer } from "./data/tabSync";
+import clsx from "clsx";
 
 const languageDetector = new LanguageDetector();
 languageDetector.init({
@@ -634,7 +635,12 @@ const ExcalidrawWrapper = () => {
   }, []);
 
   return (
-    <>
+    <div
+      style={{ height: "100%" }}
+      className={clsx("excalidraw-app", {
+        "is-collaborating": collabAPI?.isCollaborating(),
+      })}
+    >
       <Excalidraw
         ref={excalidrawRefCallback}
         onChange={onChange}
@@ -686,7 +692,7 @@ const ExcalidrawWrapper = () => {
           onClose={() => setErrorMessage("")}
         />
       )}
-    </>
+    </div>
   );
 };