Bump @babel/plugin-transform-runtime from 7.13.8 to 7.13.9 in /src/packages/utils

.gitignore

@@ -11,7 +11,6 @@
 *.log
 *.tgz
 build
-dist
 firebase
 logs
 node_modules

package.json

@@ -1,4 +1,8 @@
 {
+  "main": "src/packages/excalidraw/dist/excalidraw.min.js",
+  "files": [
+    "src/packages/excalidraw/dist/*"
+  ],
   "browserslist": {
     "production": [
       ">0.2%",
@@ -83,6 +87,8 @@
   "private": true,
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
+    "build:package": "cd src/packages/excalidraw && npm run build",
+    "build:package:deploy": "npm run build:package && git add . && git commit -m release --no-edit --no-verify && git push -f && git rev-parse --short HEAD",
     "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
     "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "build:version": "node ./scripts/build-version.js",

src/actions/actionNavigate.tsx

@@ -42,16 +42,25 @@ export const actionGoToCollaborator = register({
       return null;
     }
 
-    const { background, stroke } = getClientColors(clientId, appState);
+    const { background, stroke } = getClientColors(
+      clientId || clientId,
+      appState,
+    );
+    const picture = collaborator.picture;
+
     const shortName = getClientInitials(collaborator.username);
 
     return (
       <Avatar
         color={background}
-        border={stroke}
+        border={picture ? "transparent" : stroke}
         onClick={() => updateData(collaborator.pointer)}
       >
-        {shortName}
+        {picture ? (
+          <img referrerPolicy="no-referrer" src={picture} alt={shortName} />
+        ) : (
+          shortName
+        )}
       </Avatar>
     );
   },

src/components/App.tsx

@@ -410,22 +410,28 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
   public render() {
     const {
-      zenModeEnabled,
       width: canvasDOMWidth,
       height: canvasDOMHeight,
       offsetTop,
       offsetLeft,
       viewModeEnabled,
+      zenModeEnabled,
     } = this.state;
 
-    const { onCollabButtonClick, onExportToBackend, renderFooter } = this.props;
+    const {
+      onCollabButtonClick,
+      onExportToBackend,
+      renderFooter,
+      renderTopRight,
+    } = this.props;
 
     const DEFAULT_PASTE_X = canvasDOMWidth / 2;
     const DEFAULT_PASTE_Y = canvasDOMHeight / 2;
 
     return (
       <div
         className={clsx("excalidraw", {
+          "excalidraw--zen-mode": zenModeEnabled,
           "excalidraw--view-mode": viewModeEnabled,
         })}
         ref={this.excalidrawContainerRef}
@@ -457,10 +463,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           isCollaborating={this.props.isCollaborating || false}
           onExportToBackend={onExportToBackend}
           renderCustomFooter={renderFooter}
+          renderTopRight={renderTopRight}
           viewModeEnabled={viewModeEnabled}
           showExitZenModeBtn={
             typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled
           }
+          onHomeButtonClick={this.props.onHomeButtonClick}
         />
         <div className="excalidraw-textEditorContainer" />
         {this.state.showStats && (
@@ -691,6 +699,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       };
     }
 
+    if (initialData?.scrollX != null) {
+      scene.appState.scrollX = initialData.scrollX;
+    }
+    if (initialData?.scrollY != null) {
+      scene.appState.scrollY = initialData.scrollY;
+    }
+
     this.resetHistory();
     this.syncActionResult({
       ...scene,
@@ -1263,26 +1278,30 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.setState({ toastMessage: null });
   };
 
-  public updateScene = withBatchedUpdates((sceneData: SceneData) => {
-    if (sceneData.commitToHistory) {
-      history.resumeRecording();
-    }
+  public updateScene = withBatchedUpdates(
+    <K extends keyof AppState>(sceneData: {
+      elements?: SceneData["elements"];
+      appState?: Pick<AppState, K>;
+      collaborators?: SceneData["collaborators"];
+      commitToHistory?: SceneData["commitToHistory"];
+    }) => {
+      if (sceneData.commitToHistory) {
+        history.resumeRecording();
+      }
 
-    // currently we only support syncing background color
-    if (sceneData.appState?.viewBackgroundColor) {
-      this.setState({
-        viewBackgroundColor: sceneData.appState.viewBackgroundColor,
-      });
-    }
+      if (sceneData.appState) {
+        this.setState(sceneData.appState);
+      }
 
-    if (sceneData.elements) {
-      this.scene.replaceAllElements(sceneData.elements);
-    }
+      if (sceneData.elements) {
+        this.scene.replaceAllElements(sceneData.elements);
+      }
 
-    if (sceneData.collaborators) {
-      this.setState({ collaborators: sceneData.collaborators });
-    }
-  });
+      if (sceneData.collaborators) {
+        this.setState({ collaborators: sceneData.collaborators });
+      }
+    },
+  );
 
   private onSceneUpdated = () => {
     this.setState({});

src/components/Avatar.scss

@@ -4,13 +4,19 @@
   .Avatar {
     width: 2.5rem;
     height: 2.5rem;
-    border-radius: 1.25rem;
+    border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     color: $oc-white;
     cursor: pointer;
     font-size: 0.8rem;
     font-weight: 500;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
 }

src/components/Avatar.tsx

@@ -3,7 +3,7 @@ import "./Avatar.scss";
 import React from "react";
 
 type AvatarProps = {
-  children: string;
+  children: JSX.Element | string;
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   color: string;
   border: string;
@@ -12,7 +12,7 @@ type AvatarProps = {
 export const Avatar = ({ children, color, border, onClick }: AvatarProps) => (
   <div
     className="Avatar"
-    style={{ background: color, border: `1px solid ${border}` }}
+    style={{ background: color, border: `2px solid ${border}` }}
     onClick={onClick}
   >
     {children}

src/components/BackgroundPickerAndDarkModeToggle.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { ActionManager } from "../actions/manager";
 import { AppState } from "../types";
-import { DarkModeToggle } from "./DarkModeToggle";
 
 export const BackgroundPickerAndDarkModeToggle = ({
   appState,
@@ -14,13 +13,5 @@ export const BackgroundPickerAndDarkModeToggle = ({
 }) => (
   <div style={{ display: "flex" }}>
     {actionManager.renderAction("changeViewBackgroundColor")}
-    <div style={{ marginInlineStart: "0.25rem" }}>
-      <DarkModeToggle
-        value={appState.appearance}
-        onChange={(appearance) => {
-          setAppState({ appearance });
-        }}
-      />
-    </div>
   </div>
 );

src/components/CollabButton.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
-import { users } from "./icons";
+import { shareIcon } from "./icons";
 
 import "./CollabButton.scss";
 
@@ -23,16 +23,12 @@ const CollabButton = ({
           "is-collaborating": isCollaborating,
         })}
         onClick={onClick}
-        icon={users}
+        icon={shareIcon}
         type="button"
         title={t("labels.liveCollaboration")}
         aria-label={t("labels.liveCollaboration")}
         showAriaLabel={useIsMobile()}
-      >
-        {collaboratorCount > 0 && (
-          <div className="CollabButton-collaborators">{collaboratorCount}</div>
-        )}
-      </ToolButton>
+      />
     </>
   );
 };

src/components/ExportDialog.tsx

@@ -168,10 +168,9 @@ const ExportModal = ({
                 onClick={() => onExportToBackend(exportedElements)}
               />
             )}
+            {appState.fileHandle && actionManager.renderAction("saveScene")}
+            {actionManager.renderAction("saveAsScene")}
           </Stack.Row>
-          <div className="ExportDialog__name">
-            {actionManager.renderAction("changeProjectName")}
-          </div>
           <Stack.Row gap={2}>
             {scales.map((s) => {
               const [width, height] = getExportSize(

src/components/Island.scss

@@ -7,10 +7,49 @@
     border-radius: 4px;
     padding: calc(var(--padding) * var(--space-factor));
     position: relative;
-    transition: box-shadow 0.5s ease-in-out;
 
     &.zen-mode {
       box-shadow: none;
     }
+
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--color-scrollbar-thumb);
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-scrollbar-thumb-hover);
+    }
+
+    &::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-scrollbar-thumb-active);
+    }
+  }
+
+  .App-menu_top {
+    .Stack_vertical {
+      .Island {
+        min-width: 216px;
+      }
+      .Stack_horizontal {
+        justify-content: center !important;
+      }
+    }
+  }
+
+  &.excalidraw--view-mode {
+    .App-menu_top {
+      .Stack_vertical {
+        .Island {
+          min-width: auto;
+        }
+      }
+    }
   }
 }

src/components/LayerUI.scss

@@ -40,36 +40,6 @@
   .layer-ui__wrapper {
     z-index: var(--zIndex-layerUI);
 
-    .encrypted-icon {
-      position: relative;
-      margin-inline-start: 15px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: var(--space-factor);
-      color: $oc-green-9;
-
-      svg {
-        width: 1.2rem;
-        height: 1.2rem;
-      }
-    }
-
-    &__github-corner {
-      top: 0;
-
-      :root[dir="ltr"] & {
-        right: 0;
-      }
-
-      :root[dir="rtl"] & {
-        left: 0;
-      }
-
-      position: absolute;
-      width: 40px;
-    }
-
     &__footer {
       position: absolute;
       z-index: 100;