feat: show excalidraw logo on top right and hide unsupported actions in mac in mobile (#5)

* feat: show excalidraw logo on top right

* fix: hide image export in mobile

* fix

src/App.scss

@@ -8,6 +8,11 @@ body,
   width: 100%;
   height: 100%;
 
+  .logo img {
+    height: 2.75rem;
+    position: absolute;
+    right: 0.1rem
+  }
   .d-none {
     display: none;
   }

src/App.tsx

@@ -3,7 +3,7 @@ import {
   AppState,
   ExcalidrawImperativeAPI,
 } from "@excalidraw/excalidraw/types/types";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 
 import CollabWrapper, {
   CollabAPI,
@@ -20,7 +20,12 @@ import {
 import { ImportedDataState } from "@excalidraw/excalidraw/types/data/types";
 import { getCollaborationLinkData } from "./data";
 import { ResolvablePromise } from "@excalidraw/excalidraw/types/utils";
-import { isDev, loadScript, resolvablePromise } from "./utils";
+import {
+  hideUnsupportedActions,
+  isDev,
+  loadScript,
+  resolvablePromise,
+} from "./utils";
 import { isDarwin, WEBEX_URL } from "./constants";
 
 const ExcalidrawWrapper = () => {
@@ -46,10 +51,7 @@ const ExcalidrawWrapper = () => {
       window.webexInstance = new window.Webex.Application();
       const webexApp = window.webexInstance;
       if (webexApp.deviceType === "DESKTOP" && isDarwin) {
-        const imageExport = document.querySelector(
-          '[data-testid="image-export-button"]',
-        ) as HTMLElement;
-        imageExport?.classList.add("d-none");
+        hideUnsupportedActions();
       }
       if (!collabAPI || !excalidrawAPI) {
         return;
@@ -144,10 +146,28 @@ const ExcalidrawWrapper = () => {
     elements: readonly ExcalidrawElement[],
     appState: AppState,
   ) => {
+    if (appState.openMenu === "canvas") {
+      hideUnsupportedActions();
+    }
     if (collabAPI?.isCollaborating) {
       collabAPI.broadcastElements(elements);
     }
   };
+
+  const renderTopRightUI = useCallback((isMobile) => {
+    return (
+      <div className="logo">
+        <a
+          href="https://plus.excalidraw.com/?utm_source=excalidraw&utm_medium=banner&utm_campaign=launch"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <img src="/logo.png" alt="excalidraw logo" />
+        </a>
+      </div>
+    );
+  }, []);
+
   if (!loaded) {
     return null;
   }
@@ -160,6 +180,7 @@ const ExcalidrawWrapper = () => {
         initialData={initialStatePromiseRef.current.promise}
         onPointerUpdate={collabAPI?.onPointerUpdate}
         theme={theme}
+        renderTopRightUI={renderTopRightUI}
       />
       {excalidrawAPI && (
         <CollabWrapper excalidrawAPI={excalidrawAPI} user={user} />

src/utils.ts

@@ -31,3 +31,10 @@ export const loadScript = (filePath: string) => {
 export const isDev = () => {
   return process.env.NODE_ENV === ENV.DEVELOPMENT;
 };
+
+export const hideUnsupportedActions = () => {
+  const imageExport = document.querySelector(
+    '[data-testid="image-export-button"]',
+  ) as HTMLElement;
+  imageExport.style.display = "none";
+};