[debug]

# Conflicts:
#	package.json
#	src/locales/en.json
#	yarn.lock

.codesandbox/Dockerfile

@@ -1,5 +0,0 @@
-FROM node:18-bullseye
-
-# Vite wants to open the browser using `open`, so we
-# need to install those utils.
-RUN apt update -y && apt install -y xdg-utils

.codesandbox/tasks.json

@@ -27,10 +27,7 @@
     "start": {
       "name": "Start Excalidraw",
       "command": "yarn start",
-      "runAtStart": true,
-      "preview": {
-        "port": 3000
-      }
+      "runAtStart": true
     },
     "test": {
       "name": "Run Tests",
@@ -40,11 +37,7 @@
     "install-deps": {
       "name": "Install Dependencies",
       "command": "yarn install",
-      "restartOn": {
-        "files": ["yarn.lock"],
-        "branch": false,
-        "resume": false
-      }
+      "restartOn": { "files": ["yarn.lock"] }
     }
   }
 }

.env.production

@@ -1,5 +1,5 @@
-VITE_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
-VITE_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
+REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
+REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
 
 VITE_APP_LIBRARY_URL=https://libraries.excalidraw.com
 VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries

.github/workflows/test-coverage-pr.yml

@@ -1,26 +0,0 @@
-name: Test Coverage PR
-on:
-  pull_request:
-
-jobs:
-  coverage:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: write
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: "Install Node"
-        uses: actions/setup-node@v2
-        with:
-          node-version: "18.x"
-      - name: "Install Deps"
-        run: yarn --frozen-lockfile
-      - name: "Test Coverage"
-        run: yarn test:coverage
-      - name: "Report Coverage"
-        if: always() # Also generate the report if tests are failing
-        uses: davelosert/vitest-coverage-report-action@v2
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}

.nvmrc

@@ -1 +1 @@
-18
+14

dev-docs/yarn.lock

@@ -6611,19 +6611,19 @@ semver@7.0.0:
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
 semver@^5.4.1:
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
-  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
-  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
 semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
-  version "7.5.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
   dependencies:
     lru-cache "^6.0.0"
 

package.json

@@ -54,7 +54,7 @@
     "react-dom": "18.2.0",
     "roughjs": "4.5.2",
     "sass": "1.51.0",
-    "socket.io-client": "2.3.1",
+    "socket.io-client": "4.6.1",
     "tunnel-rat": "0.1.2"
   },
   "devDependencies": {
@@ -70,7 +70,6 @@
     "@types/resize-observer-browser": "0.1.7",
     "@types/socket.io-client": "1.4.36",
     "@vitejs/plugin-react": "3.1.0",
-    "@vitest/coverage-v8": "0.33.0",
     "@vitest/ui": "0.32.2",
     "chai": "4.3.6",
     "dotenv": "16.0.1",
@@ -102,8 +101,8 @@
   "private": true,
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build",
-    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA vite build",
+    "build:app:docker": "cross-env REACT_APP_DISABLE_SENTRY=true REACT_APP_DISABLE_TRACKING=true vite build",
+    "build:app": "cross-env REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA vite build",
     "build:version": "node ./scripts/build-version.js",
     "build": "yarn build:app && yarn build:version",
     "fix:code": "yarn test:code --fix",
@@ -115,15 +114,14 @@
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "vite",
     "start:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
-    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watch=false",
+    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
     "test:app": "vitest --config vitest.config.ts",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
     "test:other": "yarn prettier --list-different",
     "test:typecheck": "tsc",
     "test:update": "yarn test:app --update --watch=false",
     "test": "yarn test:app",
-    "test:coverage": "vitest --coverage",
-    "test:coverage:watch": "vitest --coverage --watch",
+    "test:coverage": "vitest --coverage --watchAll",
     "test:ui": "yarn test --ui",
     "autorelease": "node scripts/autorelease.js",
     "prerelease": "node scripts/prerelease.js",

public/service-worker.js

@@ -1,20 +0,0 @@
-// Since we migrated to Vite, the service worker strategy changed, in CRA it was a custom service worker named service-worker.js and in Vite its sw.js handled by vite-plugin-pwa
-// Due to this the existing CRA users were not able to migrate to Vite or any new changes post Vite unless browser is hard refreshed
-// Hence adding a self destroying worker so all CRA service workers are destroyed and migrated to Vite
-// We should remove this code after sometime when we are confident that
-// all users have migrated to Vite
-
-self.addEventListener("install", () => {
-  self.skipWaiting();
-});
-
-self.addEventListener("activate", () => {
-  self.registration
-    .unregister()
-    .then(() => {
-      return self.clients.matchAll();
-    })
-    .then((clients) => {
-      clients.forEach((client) => client.navigate(client.url));
-    });
-});

src/components/App.tsx

@@ -298,6 +298,7 @@ import {
   getApproxMinLineWidth,
   getBoundTextElement,
   getContainerCenter,
+  getContainerDims,
   getContainerElement,
   getDefaultLineHeight,
   getLineHeightInPx,
@@ -940,7 +941,7 @@ class App extends React.Component<AppProps, AppState> {
                       title="Excalidraw Embedded Content"
                       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                       allowFullScreen={true}
-                      sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-downloads"
+                      sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"
                     />
                   )}
                 </div>
@@ -2747,6 +2748,7 @@ class App extends React.Component<AppProps, AppState> {
     toast: {
       message: string;
       closable?: boolean;
+      spinner?: boolean;
       duration?: number;
     } | null,
   ) => {
@@ -3547,8 +3549,9 @@ class App extends React.Component<AppProps, AppState> {
         lineHeight,
       );
       const minHeight = getApproxMinLineHeight(fontSize, lineHeight);
-      const newHeight = Math.max(container.height, minHeight);
-      const newWidth = Math.max(container.width, minWidth);
+      const containerDims = getContainerDims(container);
+      const newHeight = Math.max(containerDims.height, minHeight);
+      const newWidth = Math.max(containerDims.width, minWidth);
       mutateElement(container, { height: newHeight, width: newWidth });
       sceneX = container.x + newWidth / 2;
       sceneY = container.y + newHeight / 2;

src/components/EyeDropper.tsx

@@ -77,8 +77,8 @@ export const EyeDropper: React.FC<{
       colorPreviewDiv.style.left = `${clientX + 20}px`;
 
       const pixel = ctx.getImageData(
-        (clientX - appState.offsetLeft) * window.devicePixelRatio,
-        (clientY - appState.offsetTop) * window.devicePixelRatio,
+        clientX * window.devicePixelRatio - appState.offsetLeft,
+        clientY * window.devicePixelRatio - appState.offsetTop,
         1,
         1,
       ).data;

src/components/Toast.scss

@@ -25,6 +25,17 @@
       white-space: pre-wrap;
     }
 
+    .Toast__message--spinner {
+      padding: 0 3rem;
+    }
+
+    .Toast__spinner {
+      position: absolute;
+      left: 1.5rem;
+      top: 50%;
+      margin-top: -8px;
+    }
+
     .close {
       position: absolute;
       top: 0;

src/components/Toast.tsx

@@ -1,5 +1,7 @@
+import clsx from "clsx";
 import { useCallback, useEffect, useRef } from "react";
 import { CloseIcon } from "./icons";
+import Spinner from "./Spinner";
 import "./Toast.scss";
 import { ToolButton } from "./ToolButton";
 
@@ -9,12 +11,14 @@ export const Toast = ({
   message,
   onClose,
   closable = false,
+  spinner = true,
   // To prevent autoclose, pass duration as Infinity
   duration = DEFAULT_TOAST_TIMEOUT,
 }: {
   message: string;
   onClose: () => void;
   closable?: boolean;
+  spinner?: boolean;
   duration?: number;
 }) => {
   const timerRef = useRef<number>(0);
@@ -44,7 +48,18 @@ export const Toast = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <p className="Toast__message">{message}</p>
+      {spinner && (
+        <div className="Toast__spinner">
+          <Spinner />
+        </div>
+      )}
+      <p
+        className={clsx("Toast__message", {
+          "Toast__message--spinner": spinner,
+        })}
+      >
+        {message}
+      </p>
       {closable && (
         <ToolButton
           icon={CloseIcon}

src/constants.ts

@@ -117,7 +117,6 @@ export const FRAME_STYLE = {
 
 export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 
-export const MIN_FONT_SIZE = 1;
 export const DEFAULT_FONT_SIZE = 20;
 export const DEFAULT_FONT_FAMILY: FontFamilyValues = FONT_FAMILY.Virgil;
 export const DEFAULT_TEXT_ALIGN = "left";
@@ -240,8 +239,6 @@ export const VERSIONS = {
 } as const;
 
 export const BOUND_TEXT_PADDING = 5;
-export const ARROW_LABEL_WIDTH_FRACTION = 0.7;
-export const ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO = 11;
 
 export const VERTICAL_ALIGN = {
   TOP: "top",

src/element/embeddable.ts

@@ -40,9 +40,6 @@ const RE_TWITTER = /(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?twitter.com/;
 const RE_TWITTER_EMBED =
   /^<blockquote[\s\S]*?\shref=["'](https:\/\/twitter.com\/[^"']*)/i;
 
-const RE_VALTOWN =
-  /^https:\/\/(?:www\.)?val.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
-
 const RE_GENERIC_EMBED =
   /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;
 
@@ -55,9 +52,7 @@ const ALLOWED_DOMAINS = new Set([
   "link.excalidraw.com",
   "gist.github.com",
   "twitter.com",
-  "*.simplepdf.eu",
   "stackblitz.com",
-  "val.town",
 ]);
 
 const createSrcDoc = (body: string) => {
@@ -127,14 +122,6 @@ export const getEmbedLink = (link: string | null | undefined): EmbeddedLink => {
     return { link, aspectRatio, type };
   }
 
-  const valLink = link.match(RE_VALTOWN);
-  if (valLink) {
-    link =
-      valLink[1] === "embed" ? valLink[0] : valLink[0].replace("/v", "/embed");
-    embeddedLinkCache.set(originalLink, { link, aspectRatio, type });
-    return { link, aspectRatio, type };
-  }
-
   if (RE_TWITTER.test(link)) {
     let ret: EmbeddedLink;
     // assume embed code
@@ -275,16 +262,9 @@ const validateHostname = (
     const { hostname } = new URL(url);
 
     const bareDomain = hostname.replace(/^www\./, "");
-    const bareDomainWithFirstSubdomainWildcarded = bareDomain.replace(
-      /^([^.]+)/,
-      "*",
-    );
 
     if (allowedHostnames instanceof Set) {
-      return (
-        ALLOWED_DOMAINS.has(bareDomain) ||
-        ALLOWED_DOMAINS.has(bareDomainWithFirstSubdomainWildcarded)
-      );
+      return ALLOWED_DOMAINS.has(bareDomain);
     }
 
     if (bareDomain === allowedHostnames.replace(/^www\./, "")) {

src/element/linearElementEditor.ts

@@ -264,11 +264,11 @@ export class LinearElementEditor {
             };
           }),
         );
-      }
 
-      const boundTextElement = getBoundTextElement(element);
-      if (boundTextElement) {
-        handleBindTextResize(element, false);
+        const boundTextElement = getBoundTextElement(element);
+        if (boundTextElement) {
+          handleBindTextResize(element, false);
+        }
       }
 
       // suggest bindings for first and last point if selected

src/element/resizeElements.ts

@@ -1,4 +1,4 @@
-import { MIN_FONT_SIZE, SHIFT_LOCKING_ANGLE } from "../constants";
+import { SHIFT_LOCKING_ANGLE } from "../constants";
 import { rescalePoints } from "../points";
 
 import {
@@ -204,6 +204,8 @@ const rescalePointsInElement = (
       }
     : {};
 
+const MIN_FONT_SIZE = 1;
+
 const measureFontSizeFromWidth = (
   element: NonDeleted<ExcalidrawTextElement>,
   nextWidth: number,
@@ -587,42 +589,24 @@ export const resizeSingleElement = (
     });
   }
 
-  if (
-    isArrowElement(element) &&
-    boundTextElement &&
-    shouldMaintainAspectRatio
-  ) {
-    const fontSize =
-      (resizedElement.width / element.width) * boundTextElement.fontSize;
-    if (fontSize < MIN_FONT_SIZE) {
-      return;
-    }
-    boundTextFont.fontSize = fontSize;
-  }
-
   if (
     resizedElement.width !== 0 &&
     resizedElement.height !== 0 &&
     Number.isFinite(resizedElement.x) &&
     Number.isFinite(resizedElement.y)
   ) {
-    mutateElement(element, resizedElement);
-
     updateBoundElements(element, {
       newSize: { width: resizedElement.width, height: resizedElement.height },
     });
 
+    mutateElement(element, resizedElement);
     if (boundTextElement && boundTextFont != null) {
       mutateElement(boundTextElement, {
         fontSize: boundTextFont.fontSize,
         baseline: boundTextFont.baseline,
       });
     }
-    handleBindTextResize(
-      element,
-      transformHandleDirection,
-      shouldMaintainAspectRatio,
-    );
+    handleBindTextResize(element, transformHandleDirection);
   }
 };
 
@@ -738,8 +722,12 @@ export const resizeMultipleElements = (
       fontSize?: ExcalidrawTextElement["fontSize"];
       baseline?: ExcalidrawTextElement["baseline"];
       scale?: ExcalidrawImageElement["scale"];
-      boundTextFontSize?: ExcalidrawTextElement["fontSize"];
     };
+    boundText: {
+      element: ExcalidrawTextElementWithContainer;
+      fontSize: ExcalidrawTextElement["fontSize"];
+      baseline: ExcalidrawTextElement["baseline"];
+    } | null;
   }[] = [];
 
   for (const { orig, latest } of targetElements) {
@@ -810,39 +798,50 @@ export const resizeMultipleElements = (
       }
     }
 
-    if (isTextElement(orig)) {
-      const metrics = measureFontSizeFromWidth(orig, width, height);
+    let boundText: typeof elementsAndUpdates[0]["boundText"] = null;
+
+    const boundTextElement = getBoundTextElement(latest);
+
+    if (boundTextElement || isTextElement(orig)) {
+      const updatedElement = {
+        ...latest,
+        width,
+        height,
+      };
+      const metrics = measureFontSizeFromWidth(
+        boundTextElement ?? (orig as ExcalidrawTextElement),
+        boundTextElement
+          ? getBoundTextMaxWidth(updatedElement)
+          : updatedElement.width,
+        boundTextElement
+          ? getBoundTextMaxHeight(updatedElement, boundTextElement)
+          : updatedElement.height,
+      );
+
       if (!metrics) {
         return;
       }
-      update.fontSize = metrics.size;
-      update.baseline = metrics.baseline;
-    }
 
-    const boundTextElement = pointerDownState.originalElements.get(
-      getBoundTextElementId(orig) ?? "",
-    ) as ExcalidrawTextElementWithContainer | undefined;
-
-    if (boundTextElement) {
-      const newFontSize = boundTextElement.fontSize * scale;
-      if (newFontSize < MIN_FONT_SIZE) {
-        return;
+      if (isTextElement(orig)) {
+        update.fontSize = metrics.size;
+        update.baseline = metrics.baseline;
+      }
+
+      if (boundTextElement) {
+        boundText = {
+          element: boundTextElement,
+          fontSize: metrics.size,
+          baseline: metrics.baseline,
+        };
       }
-      update.boundTextFontSize = newFontSize;
     }
 
-    elementsAndUpdates.push({
-      element: latest,
-      update,
-    });
+    elementsAndUpdates.push({ element: latest, update, boundText });
   }
 
   const elementsToUpdate = elementsAndUpdates.map(({ element }) => element);
 
-  for (const {
-    element,
-    update: { boundTextFontSize, ...update },
-  } of elementsAndUpdates) {
+  for (const { element, update, boundText } of elementsAndUpdates) {
     const { width, height, angle } = update;
 
     mutateElement(element, update, false);
@@ -852,17 +851,17 @@ export const resizeMultipleElements = (
       newSize: { width, height },
     });
 
-    const boundTextElement = getBoundTextElement(element);
-    if (boundTextElement && boundTextFontSize) {
+    if (boundText) {
+      const { element: boundTextElement, ...boundTextUpdates } = boundText;
       mutateElement(
         boundTextElement,
         {
-          fontSize: boundTextFontSize,
+          ...boundTextUpdates,
           angle: isLinearElement(element) ? undefined : angle,
         },
         false,
       );
-      handleBindTextResize(element, transformHandleType, true);
+      handleBindTextResize(element, transformHandleType);
     }
   }
 

src/element/textElement.ts

@@ -10,8 +10,6 @@ import {
 } from "./types";
 import { mutateElement } from "./mutateElement";
 import {
-  ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO,
-  ARROW_LABEL_WIDTH_FRACTION,
   BOUND_TEXT_PADDING,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
@@ -67,7 +65,7 @@ export const redrawTextBoundingBox = (
   boundTextUpdates.text = textElement.text;
 
   if (container) {
-    maxWidth = getBoundTextMaxWidth(container, textElement);
+    maxWidth = getBoundTextMaxWidth(container);
     boundTextUpdates.text = wrapText(
       textElement.originalText,
       getFontString(textElement),
@@ -85,12 +83,13 @@ export const redrawTextBoundingBox = (
   boundTextUpdates.baseline = metrics.baseline;
 
   if (container) {
+    const containerDims = getContainerDims(container);
     const maxContainerHeight = getBoundTextMaxHeight(
       container,
       textElement as ExcalidrawTextElementWithContainer,
     );
 
-    let nextHeight = container.height;
+    let nextHeight = containerDims.height;
     if (metrics.height > maxContainerHeight) {
       nextHeight = computeContainerDimensionForBoundText(
         metrics.height,
@@ -156,7 +155,6 @@ export const bindTextToShapeAfterDuplication = (
 export const handleBindTextResize = (
   container: NonDeletedExcalidrawElement,
   transformHandleType: MaybeTransformHandleType,
-  shouldMaintainAspectRatio = false,
 ) => {
   const boundTextElementId = getBoundTextElementId(container);
   if (!boundTextElementId) {
@@ -177,17 +175,15 @@ export const handleBindTextResize = (
     let text = textElement.text;
     let nextHeight = textElement.height;
     let nextWidth = textElement.width;
+    const containerDims = getContainerDims(container);
     const maxWidth = getBoundTextMaxWidth(container);
     const maxHeight = getBoundTextMaxHeight(
       container,
       textElement as ExcalidrawTextElementWithContainer,
     );
-    let containerHeight = container.height;
+    let containerHeight = containerDims.height;
     let nextBaseLine = textElement.baseline;
-    if (
-      shouldMaintainAspectRatio ||
-      (transformHandleType !== "n" && transformHandleType !== "s")
-    ) {
+    if (transformHandleType !== "n" && transformHandleType !== "s") {
       if (text) {
         text = wrapText(
           textElement.originalText,
@@ -211,7 +207,7 @@ export const handleBindTextResize = (
         container.type,
       );
 
-      const diff = containerHeight - container.height;
+      const diff = containerHeight - containerDims.height;
       // fix the y coord when resizing from ne/nw/n
       const updatedY =
         !isArrowElement(container) &&
@@ -691,6 +687,16 @@ export const getContainerElement = (
   return null;
 };
 
+export const getContainerDims = (element: ExcalidrawElement) => {
+  const MIN_WIDTH = 300;
+  if (isArrowElement(element)) {
+    const width = Math.max(element.width, MIN_WIDTH);
+    const height = element.height;
+    return { width, height };
+  }
+  return { width: element.width, height: element.height };
+};
+
 export const getContainerCenter = (
   container: ExcalidrawElement,
   appState: AppState,
@@ -881,19 +887,12 @@ export const computeContainerDimensionForBoundText = (
   return dimension + padding;
 };
 
-export const getBoundTextMaxWidth = (
-  container: ExcalidrawElement,
-  boundTextElement: ExcalidrawTextElement | null = getBoundTextElement(
-    container,
-  ),
-) => {
-  const { width } = container;
+export const getBoundTextMaxWidth = (container: ExcalidrawElement) => {
+  const width = getContainerDims(container).width;
   if (isArrowElement(container)) {
-    const minWidth =
-      (boundTextElement?.fontSize ?? DEFAULT_FONT_SIZE) *
-      ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO;
-    return Math.max(ARROW_LABEL_WIDTH_FRACTION * width, minWidth);
+    return width - BOUND_TEXT_PADDING * 8 * 2;
   }
+
   if (container.type === "ellipse") {
     // The width of the largest rectangle inscribed inside an ellipse is
     // Math.round((ellipse.width / 2) * Math.sqrt(2)) which is derived from
@@ -912,7 +911,7 @@ export const getBoundTextMaxHeight = (
   container: ExcalidrawElement,
   boundTextElement: ExcalidrawTextElementWithContainer,
 ) => {
-  const { height } = container;
+  const height = getContainerDims(container).height;
   if (isArrowElement(container)) {
     const containerHeight = height - BOUND_TEXT_PADDING * 8 * 2;
     if (containerHeight <= 0) {

src/element/textWysiwyg.tsx

@@ -23,6 +23,7 @@ import { AppState } from "../types";
 import { mutateElement } from "./mutateElement";
 import {
   getBoundTextElementId,
+  getContainerDims,
   getContainerElement,
   getTextElementAngle,
   getTextWidth,
@@ -176,19 +177,20 @@ export const textWysiwyg = ({
           updatedTextElement,
           editable,
         );
+        const containerDims = getContainerDims(container);
 
         let originalContainerData;
         if (propertiesUpdated) {
           originalContainerData = updateOriginalContainerCache(
             container.id,
-            container.height,
+            containerDims.height,
           );
         } else {
           originalContainerData = originalContainerCache[container.id];
           if (!originalContainerData) {
             originalContainerData = updateOriginalContainerCache(
               container.id,
-              container.height,
+              containerDims.height,
             );
           }
         }
@@ -212,7 +214,7 @@ export const textWysiwyg = ({
           // autoshrink container height until original container height
           // is reached when text is removed
           !isArrowElement(container) &&
-          container.height > originalContainerData.height &&
+          containerDims.height > originalContainerData.height &&
           textElementHeight < maxHeight
         ) {
           const targetContainerHeight = computeContainerDimensionForBoundText(

src/excalidraw-app/app_constants.ts

@@ -7,6 +7,8 @@ export const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
 export const SYNC_BROWSER_TABS_TIMEOUT = 50;
 export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps
 export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day
+export const PAUSE_COLLABORATION_TIMEOUT = 2000;
+export const RESUME_FALLBACK_TIMEOUT = 5000;
 
 export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
 // 1 year (https://stackoverflow.com/a/25201898/927631)

src/excalidraw-app/collab/Collab.tsx

@@ -1,6 +1,6 @@
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
-import { ExcalidrawImperativeAPI } from "../../types";
+import { ExcalidrawImperativeAPI, PauseCollaborationState } from "../../types";
 import { ErrorDialog } from "../../components/ErrorDialog";
 import { APP_NAME, ENV, EVENT } from "../../constants";
 import { ImportedDataState } from "../../data/types";
@@ -16,6 +16,7 @@ import { Collaborator, Gesture } from "../../types";
 import {
   preventUnload,
   resolvablePromise,
+  upsertMap,
   withBatchedUpdates,
 } from "../../utils";
 import {
@@ -24,12 +25,15 @@ import {
   FIREBASE_STORAGE_PREFIXES,
   INITIAL_SCENE_UPDATE_TIMEOUT,
   LOAD_IMAGES_TIMEOUT,
+  PAUSE_COLLABORATION_TIMEOUT,
   WS_SCENE_EVENT_TYPES,
   SYNC_FULL_SCENE_INTERVAL_MS,
+  RESUME_FALLBACK_TIMEOUT,
 } from "../app_constants";
 import {
   generateCollaborationLinkData,
   getCollaborationLink,
+  getCollaborationLinkData,
   getCollabServer,
   getSyncableElements,
   SocketUpdateDataSource,
@@ -43,8 +47,8 @@ import {
   saveToFirebase,
 } from "../data/firebase";
 import {
-  importUsernameFromLocalStorage,
-  saveUsernameToLocalStorage,
+  importUsernameAndIdFromLocalStorage,
+  saveUsernameAndIdToLocalStorage,
 } from "../data/localStorage";
 import Portal from "./Portal";
 import RoomDialog from "./RoomDialog";
@@ -71,16 +75,19 @@ import { resetBrowserStateVersions } from "../data/tabSync";
 import { LocalData } from "../data/LocalData";
 import { atom, useAtom } from "jotai";
 import { appJotaiStore } from "../app-jotai";
+import { nanoid } from "nanoid";
 
 export const collabAPIAtom = atom<CollabAPI | null>(null);
 export const collabDialogShownAtom = atom(false);
 export const isCollaboratingAtom = atom(false);
 export const isOfflineAtom = atom(false);
+export const isCollaborationPausedAtom = atom(false);
 
 interface CollabState {
   errorMessage: string;
   username: string;
   activeRoomLink: string;
+  userId: string;
 }
 
 type CollabInstance = InstanceType<typeof Collab>;
@@ -94,6 +101,7 @@ export interface CollabAPI {
   syncElements: CollabInstance["syncElements"];
   fetchImageFilesFromFirebase: CollabInstance["fetchImageFilesFromFirebase"];
   setUsername: (username: string) => void;
+  isPaused: () => boolean;
 }
 
 interface PublicProps {
@@ -108,6 +116,7 @@ class Collab extends PureComponent<Props, CollabState> {
   excalidrawAPI: Props["excalidrawAPI"];
   activeIntervalId: number | null;
   idleTimeoutId: number | null;
+  pauseTimeoutId: number | null;
 
   private socketInitializationTimer?: number;
   private lastBroadcastedOrReceivedSceneVersion: number = -1;
@@ -115,9 +124,13 @@ class Collab extends PureComponent<Props, CollabState> {
 
   constructor(props: Props) {
     super(props);
+
+    const { username, userId } = importUsernameAndIdFromLocalStorage() || {};
+
     this.state = {
       errorMessage: "",
-      username: importUsernameFromLocalStorage() || "",
+      username: username || "",
+      userId: userId || "",
       activeRoomLink: "",
     };
     this.portal = new Portal(this);
@@ -149,6 +162,7 @@ class Collab extends PureComponent<Props, CollabState> {
     this.excalidrawAPI = props.excalidrawAPI;
     this.activeIntervalId = null;
     this.idleTimeoutId = null;
+    this.pauseTimeoutId = null;
   }
 
   componentDidMount() {
@@ -167,6 +181,7 @@ class Collab extends PureComponent<Props, CollabState> {
       fetchImageFilesFromFirebase: this.fetchImageFilesFromFirebase,
       stopCollaboration: this.stopCollaboration,
       setUsername: this.setUsername,
+      isPaused: this.isPaused,
     };
 
     appJotaiStore.set(collabAPIAtom, collabAPI);
@@ -192,10 +207,13 @@ class Collab extends PureComponent<Props, CollabState> {
     window.removeEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload);
     window.removeEventListener(EVENT.UNLOAD, this.onUnload);
     window.removeEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
-    window.removeEventListener(
-      EVENT.VISIBILITY_CHANGE,
-      this.onVisibilityChange,
-    );
+    // window.removeEventListener(
+    //   EVENT.VISIBILITY_CHANGE,
+    //   this.onVisibilityChange,
+    // );
+    window.removeEventListener(EVENT.BLUR, this.onVisibilityChange);
+    window.removeEventListener(EVENT.FOCUS, this.onVisibilityChange);
+
     if (this.activeIntervalId) {
       window.clearInterval(this.activeIntervalId);
       this.activeIntervalId = null;
@@ -204,6 +222,10 @@ class Collab extends PureComponent<Props, CollabState> {
       window.clearTimeout(this.idleTimeoutId);
       this.idleTimeoutId = null;
     }
+    if (this.pauseTimeoutId) {
+      window.clearTimeout(this.pauseTimeoutId);
+      this.pauseTimeoutId = null;
+    }
   }
 
   isCollaborating = () => appJotaiStore.get(isCollaboratingAtom)!;
@@ -307,6 +329,128 @@ class Collab extends PureComponent<Props, CollabState> {
     }
   };
 
+  fallbackResumeTimeout: null | ReturnType<typeof setTimeout> = null;
+
+  /**
+   * Handles the pause and resume states of a collaboration session.
+   * This function gets triggered when a change in the collaboration pause state is detected.
+   * Based on the state, the function carries out the following actions:
+   * 1. `PAUSED`: Saves the current scene to Firebase, disconnects the socket, and updates the scene to view mode.
+   * 2. `RESUMED`: Connects the socket, shows a toast message, sets a fallback to fetch data from Firebase, and resets the pause timeout if any.
+   * 3. `SYNCED`: Clears the fallback timeout if any, updates the collaboration pause state, and updates the scene to editing mode.
+   *
+   * @param state - The new state of the collaboration session. It is one of the values of `PauseCollaborationState` enum, which includes `PAUSED`, `RESUMED`, and `SYNCED`.
+   */
+  onPauseCollaborationChange = (state: PauseCollaborationState) => {
+    switch (state) {
+      case PauseCollaborationState.PAUSED: {
+        if (this.portal.socket) {
+          // Save current scene to firebase
+          this.saveCollabRoomToFirebase(
+            getSyncableElements(
+              this.excalidrawAPI.getSceneElementsIncludingDeleted(),
+            ),
+          );
+
+          this.portal.socket.disconnect();
+          this.portal.socketInitialized = false;
+          this.setIsCollaborationPaused(true);
+
+          this.excalidrawAPI.updateScene({
+            appState: { viewModeEnabled: true },
+          });
+        }
+        break;
+      }
+      case PauseCollaborationState.RESUMED: {
+        if (this.portal.socket && this.isPaused()) {
+          this.portal.socket.connect();
+          this.portal.socket.emit(WS_SCENE_EVENT_TYPES.INIT);
+
+          console.log("setting toast");
+          this.excalidrawAPI.setToast({
+            message: t("toast.reconnectRoomServer"),
+            duration: Infinity,
+            spinner: true,
+            closable: false,
+          });
+
+          // Fallback to fetch data from firebase when reconnecting to scene without collaborators
+          const fallbackResumeHandler = async () => {
+            const roomLinkData = getCollaborationLinkData(
+              this.state.activeRoomLink,
+            );
+            if (!roomLinkData) {
+              return;
+            }
+            const elements = await loadFromFirebase(
+              roomLinkData.roomId,
+              roomLinkData.roomKey,
+              this.portal.socket,
+            );
+            if (elements) {
+              this.setLastBroadcastedOrReceivedSceneVersion(
+                getSceneVersion(elements),
+              );
+
+              this.excalidrawAPI.updateScene({
+                elements,
+              });
+            }
+            this.onPauseCollaborationChange(PauseCollaborationState.SYNCED);
+          };
+
+          // Set timeout to fallback to fetch data from firebase
+          this.fallbackResumeTimeout = setTimeout(
+            fallbackResumeHandler,
+            RESUME_FALLBACK_TIMEOUT,
+          );
+
+          // When no users are in the room, we fallback to fetch data from firebase immediately and clear fallback timeout
+          this.portal.socket.on("first-in-room", () => {
+            if (this.portal.socket) {
+              this.portal.socket.off("first-in-room");
+              // Recall init event to initialize collab with other users (fixes https://github.com/excalidraw/excalidraw/pull/6638#issuecomment-1600799080)
+              this.portal.socket.emit(WS_SCENE_EVENT_TYPES.INIT);
+            }
+
+            fallbackResumeHandler();
+          });
+        }
+
+        // Clear pause timeout if exists
+        if (this.pauseTimeoutId) {
+          clearTimeout(this.pauseTimeoutId);
+        }
+
+        break;
+      }
+      case PauseCollaborationState.SYNCED: {
+        if (this.fallbackResumeTimeout) {
+          clearTimeout(this.fallbackResumeTimeout);
+          this.fallbackResumeTimeout = null;
+        }
+
+        if (this.isPaused()) {
+          this.setIsCollaborationPaused(false);
+
+          this.excalidrawAPI.updateScene({
+            appState: { viewModeEnabled: false },
+          });
+          console.log("resetting toast");
+          this.excalidrawAPI.setToast(null);
+          this.excalidrawAPI.scrollToContent();
+        }
+      }
+    }
+  };
+
+  isPaused = () => appJotaiStore.get(isCollaborationPausedAtom)!;
+
+  setIsCollaborationPaused = (isPaused: boolean) => {
+    appJotaiStore.set(isCollaborationPausedAtom, isPaused);
+  };
+
   private destroySocketClient = (opts?: { isUnload: boolean }) => {
     this.lastBroadcastedOrReceivedSceneVersion = -1;
     this.portal.close();
@@ -385,6 +529,11 @@ class Collab extends PureComponent<Props, CollabState> {
       });
     }
 
+    if (!this.state.userId) {
+      const userId = nanoid();
+      this.onUserIdChange(userId);
+    }
+
     if (this.portal.socket) {
       return null;
     }
@@ -499,6 +648,7 @@ class Collab extends PureComponent<Props, CollabState> {
                 elements: reconciledElements,
                 scrollToContent: true,
               });
+              this.onPauseCollaborationChange(PauseCollaborationState.SYNCED);
             }
             break;
           }
@@ -508,33 +658,45 @@ class Collab extends PureComponent<Props, CollabState> {
             );
             break;
           case "MOUSE_LOCATION": {
-            const { pointer, button, username, selectedElementIds } =
-              decryptedData.payload;
-            const socketId: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["socketId"] =
-              decryptedData.payload.socketId ||
-              // @ts-ignore legacy, see #2094 (#2097)
-              decryptedData.payload.socketID;
-
-            const collaborators = new Map(this.collaborators);
-            const user = collaborators.get(socketId) || {}!;
-            user.pointer = pointer;
-            user.button = button;
-            user.selectedElementIds = selectedElementIds;
-            user.username = username;
-            collaborators.set(socketId, user);
+            const {
+              pointer,
+              button,
+              username,
+              selectedElementIds,
+              userId,
+              socketId,
+            } = decryptedData.payload;
+            const collaborators = upsertMap(
+              userId,
+              {
+                username,
+                pointer,
+                button,
+                selectedElementIds,
+                socketId,
+              },
+              this.collaborators,
+            );
             this.excalidrawAPI.updateScene({
-              collaborators,
+              collaborators: new Map(collaborators),
             });
             break;
           }
           case "IDLE_STATUS": {
-            const { userState, socketId, username } = decryptedData.payload;
-            const collaborators = new Map(this.collaborators);
-            const user = collaborators.get(socketId) || {}!;
-            user.userState = userState;
-            user.username = username;
+            const { userState, username, userId, socketId } =
+              decryptedData.payload;
+            const collaborators = upsertMap(
+              userId,
+              {
+                username,
+                userState,
+                userId,
+                socketId,
+              },
+              this.collaborators,
+            );
             this.excalidrawAPI.updateScene({
-              collaborators,
+              collaborators: new Map(collaborators),
             });
             break;
           }
@@ -543,6 +705,7 @@ class Collab extends PureComponent<Props, CollabState> {
     );
 
     this.portal.socket.on("first-in-room", async () => {
+      console.log("first in room");
       if (this.portal.socket) {
         this.portal.socket.off("first-in-room");
       }
@@ -684,7 +847,9 @@ class Collab extends PureComponent<Props, CollabState> {
   };
 
   private onVisibilityChange = () => {
-    if (document.hidden) {
+    // if (document.hidden) {
+    console.log("VIS CHANGE");
+    if (!document.hasFocus()) {
       if (this.idleTimeoutId) {
         window.clearTimeout(this.idleTimeoutId);
         this.idleTimeoutId = null;
@@ -693,6 +858,10 @@ class Collab extends PureComponent<Props, CollabState> {
         window.clearInterval(this.activeIntervalId);
         this.activeIntervalId = null;
       }
+      this.pauseTimeoutId = window.setTimeout(
+        () => this.onPauseCollaborationChange(PauseCollaborationState.PAUSED),
+        PAUSE_COLLABORATION_TIMEOUT,
+      );
       this.onIdleStateChange(UserIdleState.AWAY);
     } else {
       this.idleTimeoutId = window.setTimeout(this.reportIdle, IDLE_THRESHOLD);
@@ -701,6 +870,11 @@ class Collab extends PureComponent<Props, CollabState> {
         ACTIVE_THRESHOLD,
       );
       this.onIdleStateChange(UserIdleState.ACTIVE);
+      if (this.pauseTimeoutId) {
+        window.clearTimeout(this.pauseTimeoutId);
+        this.onPauseCollaborationChange(PauseCollaborationState.RESUMED);
+        this.pauseTimeoutId = null;
+      }
     }
   };
 
@@ -717,22 +891,19 @@ class Collab extends PureComponent<Props, CollabState> {
   };
 
   private initializeIdleDetector = () => {
-    document.addEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
-    document.addEventListener(EVENT.VISIBILITY_CHANGE, this.onVisibilityChange);
+    // document.addEventListener(EVENT.POINTER_MOVE, this.onPointerMove);
+    // document.addEventListener(EVENT.VISIBILITY_CHANGE, this.onVisibilityChange);
+    window.addEventListener(EVENT.BLUR, this.onVisibilityChange);
+    window.addEventListener(EVENT.FOCUS, this.onVisibilityChange);
   };
 
   setCollaborators(sockets: string[]) {
-    const collaborators: InstanceType<typeof Collab>["collaborators"] =
-      new Map();
-    for (const socketId of sockets) {
-      if (this.collaborators.has(socketId)) {
-        collaborators.set(socketId, this.collaborators.get(socketId)!);
-      } else {
-        collaborators.set(socketId, {});
+    this.collaborators.forEach((value, key) => {
+      if (value.socketId && !sockets.includes(value.socketId)) {
+        this.collaborators.delete(key);
       }
-    }
-    this.collaborators = collaborators;
-    this.excalidrawAPI.updateScene({ collaborators });
+    });
+    this.excalidrawAPI.updateScene({ collaborators: this.collaborators });
   }
 
   public setLastBroadcastedOrReceivedSceneVersion = (version: number) => {
@@ -818,7 +989,12 @@ class Collab extends PureComponent<Props, CollabState> {
 
   onUsernameChange = (username: string) => {
     this.setUsername(username);
-    saveUsernameToLocalStorage(username);
+    saveUsernameAndIdToLocalStorage(username, this.state.userId);
+  };
+
+  onUserIdChange = (userId: string) => {
+    this.setState({ userId });
+    saveUsernameAndIdToLocalStorage(this.state.username, userId);
   };
 
   render() {

src/excalidraw-app/collab/Portal.tsx

@@ -34,26 +34,12 @@ class Portal {
 
   open(socket: SocketIOClient.Socket, id: string, key: string) {
     this.socket = socket;
+    // @ts-ignore
+    window.socket = socket;
     this.roomId = id;
     this.roomKey = key;
 
-    // Initialize socket listeners
-    this.socket.on("init-room", () => {
-      if (this.socket) {
-        this.socket.emit("join-room", this.roomId);
-        trackEvent("share", "room joined");
-      }
-    });
-    this.socket.on("new-user", async (_socketId: string) => {
-      this.broadcastScene(
-        WS_SCENE_EVENT_TYPES.INIT,
-        this.collab.getSceneElementsIncludingDeleted(),
-        /* syncAll */ true,
-      );
-    });
-    this.socket.on("room-user-change", (clients: string[]) => {
-      this.collab.setCollaborators(clients);
-    });
+    this.initializeSocketListeners();
 
     return socket;
   }
@@ -71,6 +57,31 @@ class Portal {
     this.broadcastedElementVersions = new Map();
   }
 
+  initializeSocketListeners() {
+    if (!this.socket) {
+      return;
+    }
+
+    // Initialize socket listeners
+    this.socket.on("init-room", () => {
+      console.log("join room");
+      if (this.socket) {
+        this.socket.emit("join-room", this.roomId);
+        trackEvent("share", "room joined");
+      }
+    });
+    this.socket.on("new-user", async (_socketId: string) => {
+      this.broadcastScene(
+        WS_SCENE_EVENT_TYPES.INIT,
+        this.collab.getSceneElementsIncludingDeleted(),
+        /* syncAll */ true,
+      );
+    });
+    this.socket.on("room-user-change", (clients: string[]) => {
+      this.collab.setCollaborators(clients);
+    });
+  }
+
   isOpen() {
     return !!(
       this.socketInitialized &&
@@ -181,13 +192,14 @@ class Portal {
   };
 
   broadcastIdleChange = (userState: UserIdleState) => {
-    if (this.socket?.id) {
+    if (this.socket) {
       const data: SocketUpdateDataSource["IDLE_STATUS"] = {
         type: "IDLE_STATUS",
         payload: {
-          socketId: this.socket.id,
           userState,
           username: this.collab.state.username,
+          userId: this.collab.state.userId,
+          socketId: this.socket.id,
         },
       };
       return this._broadcastSocketData(
@@ -201,16 +213,17 @@ class Portal {
     pointer: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["pointer"];
     button: SocketUpdateDataSource["MOUSE_LOCATION"]["payload"]["button"];
   }) => {
-    if (this.socket?.id) {
+    if (this.socket) {
       const data: SocketUpdateDataSource["MOUSE_LOCATION"] = {
         type: "MOUSE_LOCATION",
         payload: {
-          socketId: this.socket.id,
           pointer: payload.pointer,
           button: payload.button || "up",
           selectedElementIds:
             this.collab.excalidrawAPI.getAppState().selectedElementIds,
           username: this.collab.state.username,
+          userId: this.collab.state.userId,
+          socketId: this.socket.id,
         },
       };
       return this._broadcastSocketData(

src/excalidraw-app/data/index.ts

@@ -106,19 +106,21 @@ export type SocketUpdateDataSource = {
   MOUSE_LOCATION: {
     type: "MOUSE_LOCATION";
     payload: {
-      socketId: string;
       pointer: { x: number; y: number };
       button: "down" | "up";
       selectedElementIds: AppState["selectedElementIds"];
       username: string;
+      userId: string;
+      socketId: string;
     };
   };
   IDLE_STATUS: {
     type: "IDLE_STATUS";
     payload: {
-      socketId: string;
       userState: UserIdleState;
       username: string;
+      userId: string;
+      socketId: string;
     };
   };
 };

src/excalidraw-app/data/localStorage.ts

@@ -8,11 +8,14 @@ import { clearElementsForLocalStorage } from "../../element";
 import { STORAGE_KEYS } from "../app_constants";
 import { ImportedDataState } from "../../data/types";
 
-export const saveUsernameToLocalStorage = (username: string) => {
+export const saveUsernameAndIdToLocalStorage = (
+  username: string,
+  userId: string,
+) => {
   try {
     localStorage.setItem(
       STORAGE_KEYS.LOCAL_STORAGE_COLLAB,
-      JSON.stringify({ username }),
+      JSON.stringify({ username, userId }),
     );
   } catch (error: any) {
     // Unable to access window.localStorage
@@ -20,11 +23,14 @@ export const saveUsernameToLocalStorage = (username: string) => {
   }
 };
 
-export const importUsernameFromLocalStorage = (): string | null => {
+export const importUsernameAndIdFromLocalStorage = (): {
+  username: string;
+  userId: string;
+} | null => {
   try {
     const data = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_COLLAB);
     if (data) {
-      return JSON.parse(data).username;
+      return JSON.parse(data);
     }
   } catch (error: any) {
     // Unable to access localStorage

src/excalidraw-app/index.tsx

@@ -65,7 +65,7 @@ import {
 import {
   getLibraryItemsFromStorage,
   importFromLocalStorage,
-  importUsernameFromLocalStorage,
+  importUsernameAndIdFromLocalStorage,
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
 import { restore, restoreAppState, RestoredDataState } from "../data/restore";
@@ -425,7 +425,8 @@ const ExcalidrawWrapper = () => {
         // don't sync if local state is newer or identical to browser state
         if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) {
           const localDataState = importFromLocalStorage();
-          const username = importUsernameFromLocalStorage();
+          const username =
+            importUsernameAndIdFromLocalStorage()?.username ?? "";
           let langCode = languageDetector.detect() || defaultLang.code;
           if (Array.isArray(langCode)) {
             langCode = langCode[0];

src/excalidraw-app/sentry.ts

@@ -6,11 +6,12 @@ const SentryEnvHostnameMap: { [key: string]: string } = {
   "vercel.app": "staging",
 };
 
-const SENTRY_DISABLED = import.meta.env.VITE_APP_DISABLE_SENTRY === "true";
+const REACT_APP_DISABLE_SENTRY =
+  import.meta.env.VITE_APP_DISABLE_SENTRY === "true";
 
 // Disable Sentry locally or inside the Docker to avoid noise/respect privacy
 const onlineEnv =
-  !SENTRY_DISABLED &&
+  !REACT_APP_DISABLE_SENTRY &&
   Object.keys(SentryEnvHostnameMap).find(
     (item) => window.location.hostname.indexOf(item) >= 0,
   );

src/index.tsx

@@ -1,14 +1,11 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import ExcalidrawApp from "./excalidraw-app";
-import { registerSW } from "virtual:pwa-register";
 
 import "./excalidraw-app/sentry";
 window.__EXCALIDRAW_SHA__ = import.meta.env.VITE_APP_GIT_SHA;
 const rootElement = document.getElementById("root")!;
 const root = createRoot(rootElement);
-registerSW();
-
 root.render(
   <StrictMode>
     <ExcalidrawApp />

src/locales/en.json

@@ -425,7 +425,8 @@
     "selection": "selection",
     "pasteAsSingleElement": "Use {{shortcut}} to paste as a single element,\nor paste into an existing text editor",
     "unableToEmbed": "Embedding this url is currently not allowed. Raise an issue on GitHub to request the url whitelisted",
-    "unrecognizedLinkFormat": "The link you embedded does not match the expected format. Please try to paste the 'embed' string provided by the source site"
+    "unrecognizedLinkFormat": "The link you embedded does not match the expected format. Please try to paste the 'embed' string provided by the source site",
+    "reconnectRoomServer": "Reconnecting to server"
   },
   "colors": {
     "transparent": "Transparent",

src/renderer/renderScene.ts

@@ -707,8 +707,8 @@ export const _renderScene = ({
           if (renderConfig.remoteSelectedElementIds[element.id]) {
             selectionColors.push(
               ...renderConfig.remoteSelectedElementIds[element.id].map(
-                (socketId) => {
-                  const background = getClientColor(socketId);
+                (userId) => {
+                  const background = getClientColor(userId);
                   return background;
                 },
               ),

src/tests/linearElementEditor.test.tsx

@@ -1128,7 +1128,7 @@ describe("Test Linear Elements", () => {
         height: 500,
       });
       const arrow = UI.createElement("arrow", {
-        x: -10,
+        x: 210,
         y: 250,
         width: 400,
         height: 1,
@@ -1152,8 +1152,8 @@ describe("Test Linear Elements", () => {
       expect(
         wrapText(textElement.originalText, font, getBoundTextMaxWidth(arrow)),
       ).toMatchInlineSnapshot(`
-        "Online whiteboard 
-        collaboration made easy"
+        "Online whiteboard collaboration
+        made easy"
       `);
       const handleBindTextResizeSpy = vi.spyOn(
         textElementUtils,
@@ -1165,7 +1165,7 @@ describe("Test Linear Elements", () => {
       mouse.moveTo(200, 0);
       mouse.upAt(200, 0);
 
-      expect(arrow.width).toBe(200);
+      expect(arrow.width).toBe(170);
       expect(rect.x).toBe(200);
       expect(rect.y).toBe(0);
       expect(handleBindTextResizeSpy).toHaveBeenCalledWith(

src/types.ts

@@ -56,6 +56,7 @@ export type Collaborator = {
   avatarUrl?: string;
   // user id. If supplied, we'll filter out duplicates when rendering user avatars.
   id?: string;
+  socketId?: string;
 };
 
 export type DataURL = string & { _brand: "DataURL" };
@@ -401,6 +402,12 @@ export enum UserIdleState {
   IDLE = "idle",
 }
 
+export enum PauseCollaborationState {
+  PAUSED = "paused",
+  RESUMED = "resumed",
+  SYNCED = "synced",
+}
+
 export type ExportOpts = {
   saveFileToDisk?: boolean;
   onExportToBackend?: (

src/utils.ts

@@ -914,3 +914,14 @@ export const isOnlyExportingSingleFrame = (
     )
   );
 };
+
+export const upsertMap = <T>(key: T, value: object, map: Map<T, object>) => {
+  if (!map.has(key)) {
+    map.set(key, value);
+  } else {
+    const old = map.get(key);
+    map.set(key, { ...old, ...value });
+  }
+
+  return map;
+};

src/vite-env.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="vite/client" />
-/// <reference types="vite-plugin-pwa/vanillajs" />
+/// <reference types="vite-plugin-pwa/react" />
 /// <reference types="vite-plugin-pwa/info" />
 /// <reference types="vite-plugin-svgr/client" />
+
 interface ImportMetaEnv {
   // The port to run the dev server
   VITE_APP_PORT: string;

vite.config.ts

@@ -53,7 +53,6 @@ export default defineConfig({
     svgrPlugin(),
     ViteEjsPlugin(),
     VitePWA({
-      registerType: "autoUpdate",
       devOptions: {
         /* set this flag to true to enable in Development mode */
         enabled: false,
@@ -61,7 +60,7 @@ export default defineConfig({
 
       workbox: {
         // Don't push fonts and locales to app precache
-        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js"],
+        globIgnores: ["fonts.css", "**/locales/**"],
         runtimeCaching: [
           {
             urlPattern: new RegExp("/.+.(ttf|woff2|otf)"),

vitest.config.ts

@@ -5,12 +5,5 @@ export default defineConfig({
     setupFiles: ["./src/setupTests.ts"],
     globals: true,
     environment: "jsdom",
-    coverage: {
-      reporter: ["text", "json-summary", "json"],
-      lines: 70,
-      branches: 70,
-      functions: 68,
-      statements: 70,
-    },
   },
 });