docs: release @excalidraw/excalidraw@0.14.1 🎉 (#6112)

remove overflow hidden from button

.github/workflows/autorelease-excalidraw.yml

@@ -2,7 +2,7 @@ name: Auto release excalidraw next
 on:
   push:
     branches:
-      - master
+      - release
 
 jobs:
   Auto-release-excalidraw-next:

.github/workflows/build-docker.yml

@@ -3,7 +3,7 @@ name: Build Docker image
 on:
   push:
     branches:
-      - master
+      - release
 
 jobs:
   build-docker:

.github/workflows/cancel.yml

@@ -3,7 +3,7 @@ name: Cancel previous runs
 on:
   push:
     branches:
-      - master
+      - release
   pull_request:
 
 jobs:

.github/workflows/publish-docker.yml

@@ -3,7 +3,7 @@ name: Publish Docker
 on:
   push:
     branches:
-      - master
+      - release
 
 jobs:
   publish-docker:

.github/workflows/sentry-production.yml

@@ -3,7 +3,7 @@ name: New Sentry production release
 on:
   push:
     branches:
-      - master
+      - release
 
 jobs:
   sentry:

dev-docs/yarn.lock

@@ -4692,9 +4692,9 @@ json-schema-traverse@^1.0.0:
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
 json5@^2.1.2, json5@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
-  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
 jsonfile@^6.0.1:
   version "6.1.0"
@@ -4755,9 +4755,9 @@ loader-runner@^4.2.0:
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
 loader-utils@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.3.tgz#d4b15b8504c63d1fc3f2ade52d41bc8459d6ede1"
-  integrity sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
   dependencies:
     big.js "^5.2.2"
     emojis-list "^3.0.0"

package.json

@@ -31,6 +31,7 @@
     "@types/socket.io-client": "1.4.36",
     "browser-fs-access": "0.29.1",
     "clsx": "1.1.1",
+    "cross-env": "7.0.3",
     "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
     "i18next-browser-languagedetector": "6.1.4",
@@ -50,11 +51,23 @@
     "pwacompat": "2.0.17",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "roughjs": "4.5.2",
     "sass": "1.51.0",
     "socket.io-client": "2.3.1",
-    "typescript": "4.5.5"
+    "typescript": "4.9.4",
+    "workbox-background-sync": "^6.5.4",
+    "workbox-broadcast-update": "^6.5.4",
+    "workbox-cacheable-response": "^6.5.4",
+    "workbox-core": "^6.5.4",
+    "workbox-expiration": "^6.5.4",
+    "workbox-google-analytics": "^6.5.4",
+    "workbox-navigation-preload": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-range-requests": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-strategies": "^6.5.4",
+    "workbox-streams": "^6.5.4"
   },
   "devDependencies": {
     "@excalidraw/eslint-config": "1.0.0",
@@ -67,6 +80,7 @@
     "dotenv": "16.0.1",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-prettier": "3.3.1",
+    "http-server": "14.1.1",
     "husky": "7.0.4",
     "jest-canvas-mock": "2.4.0",
     "lint-staged": "12.3.7",
@@ -89,11 +103,10 @@
   "private": true,
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "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:app:docker": "cross-env REACT_APP_DISABLE_SENTRY=true REACT_APP_DISABLE_TRACKING=true react-scripts build",
+    "build:app": "cross-env REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "build:version": "node ./scripts/build-version.js",
-    "build:prebuild": "node ./scripts/prebuild.js",
-    "build": "yarn build:prebuild && yarn build:app && yarn build:version",
+    "build": "yarn build:app && yarn build:version",
     "eject": "react-scripts eject",
     "fix:code": "yarn test:code --fix",
     "fix:other": "yarn prettier --write",
@@ -103,6 +116,7 @@
     "prepare": "husky install",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "react-scripts start",
+    "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 --watchAll=false",
     "test:app": "react-scripts test --passWithNoTests",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",

public/index.html

@@ -146,7 +146,8 @@
       // setting this so that libraries installation reuses this window tab.
       window.name = "_excalidraw";
     </script>
-    <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
+    <% if (process.env.REACT_APP_DISABLE_TRACKING !== 'true' &&
+    process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
     <script
       async
       src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GOOGLE_ANALYTICS_ID%"

public/service-worker.js

@@ -1,81 +0,0 @@
-// eslint-disable-next-line no-restricted-globals
-// eslint-disable-next-line no-unused-expressions
-
-/* eslint-disable no-restricted-globals */
-/* global importScripts, workbox */
-
-/**
- * Welcome to your Workbox-powered service worker!
- *
- * You'll need to register this file in your web app and you should
- * disable HTTP caching for this file too.
- * See https://goo.gl/nhQhGp
- *
- * The rest of the code is auto-generated. Please don't update this file
- * directly; instead, make changes to your Workbox build configuration
- * and re-run your build process.
- * See https://goo.gl/2aRDsh
- */
-
-// in dev, `process` is undefined because this file is not compiled until build
-const IS_DEVELOPMENT =
-  typeof process === "undefined" || process.env.NODE_ENV !== "production";
-
-if (IS_DEVELOPMENT) {
-  importScripts(
-    "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js",
-  );
-  workbox.setConfig({
-    debug: true,
-  });
-} else {
-  importScripts("/workbox/workbox-sw.js");
-  workbox.setConfig({
-    modulePathPrefix: "/workbox/",
-  });
-}
-
-self.addEventListener("message", (event) => {
-  if (event.data && event.data.type === "SKIP_WAITING") {
-    self.skipWaiting();
-  }
-});
-
-workbox.core.clientsClaim();
-
-if (!IS_DEVELOPMENT) {
-  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);
-
-  workbox.routing.registerNavigationRoute(
-    workbox.precaching.getCacheKeyForURL("./index.html"),
-    {
-      blacklist: [/^\/_/, /\/[^/?]+\.[^/]+$/],
-    },
-  );
-}
-
-// Cache relevant font files
-workbox.routing.registerRoute(
-  new RegExp("/(fonts.css|.+.(ttf|woff2|otf))"),
-  new workbox.strategies.StaleWhileRevalidate({
-    cacheName: "fonts",
-    plugins: [new workbox.expiration.Plugin({ maxEntries: 10 })],
-  }),
-);
-
-self.addEventListener("fetch", (event) => {
-  if (
-    event.request.method === "POST" &&
-    event.request.url.endsWith("/web-share-target")
-  ) {
-    return event.respondWith(
-      (async () => {
-        const formData = await event.request.formData();
-        const file = formData.get("file");
-        const webShareTargetCache = await caches.open("web-share-target");
-        await webShareTargetCache.put("shared-file", new Response(file));
-        return Response.redirect("/?web-share-target", 303);
-      })(),
-    );
-  }
-});

scripts/locales-coverage-description.js

@@ -50,8 +50,8 @@ const crowdinMap = {
   "lv-LV": "en-lv",
   "cs-CZ": "en-cs",
   "kk-KZ": "en-kk",
-  "vi-vn": "en-vi",
-  "mr-in": "en-mr",
+  "vi-VN": "en-vi",
+  "mr-IN": "en-mr",
 };
 
 const flags = {
@@ -120,6 +120,7 @@ const languages = {
   "fa-IR": "فارسی",
   "fi-FI": "Suomi",
   "fr-FR": "Français",
+  "gl-ES": "Galego",
   "he-IL": "עברית",
   "hi-IN": "हिन्दी",
   "hu-HU": "Magyar",
@@ -129,6 +130,7 @@ const languages = {
   "kab-KAB": "Taqbaylit",
   "kk-KZ": "Қазақ тілі",
   "ko-KR": "한국어",
+  "ku-TR": "Kurdî",
   "lt-LT": "Lietuvių",
   "lv-LV": "Latviešu",
   "my-MM": "Burmese",

scripts/prebuild.js

@@ -1,21 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-
-// for development purposes we want to have the service-worker.js file
-// accessible from the public folder. On build though, we need to compile it
-// and CRA expects that file to be in src/ folder.
-const moveServiceWorkerScript = () => {
-  const oldPath = path.resolve(__dirname, "../public/service-worker.js");
-  const newPath = path.resolve(__dirname, "../src/service-worker.js");
-
-  fs.rename(oldPath, newPath, (error) => {
-    if (error) {
-      throw error;
-    }
-    console.info("public/service-worker.js moved to src/");
-  });
-};
-
-// -----------------------------------------------------------------------------
-
-moveServiceWorkerScript();

src/actions/actionBoundText.tsx

@@ -6,6 +6,10 @@ import {
   measureText,
   redrawTextBoundingBox,
 } from "../element/textElement";
+import {
+  getOriginalContainerHeightFromCache,
+  resetOriginalContainerCache,
+} from "../element/textWysiwyg";
 import {
   hasBoundTextElement,
   isTextBindableContainer,
@@ -22,7 +26,7 @@ export const actionUnbindText = register({
   name: "unbindText",
   contextItemLabel: "labels.unbindText",
   trackEvent: { category: "element" },
-  contextItemPredicate: (elements, appState) => {
+  predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     return selectedElements.some((element) => hasBoundTextElement(element));
   },
@@ -38,6 +42,11 @@ export const actionUnbindText = register({
           boundTextElement.originalText,
           getFontString(boundTextElement),
         );
+        const originalContainerHeight = getOriginalContainerHeightFromCache(
+          element.id,
+        );
+        resetOriginalContainerCache(element.id);
+
         mutateElement(boundTextElement as ExcalidrawTextElement, {
           containerId: null,
           width,
@@ -49,6 +58,9 @@ export const actionUnbindText = register({
           boundElements: element.boundElements?.filter(
             (ele) => ele.id !== boundTextElement.id,
           ),
+          height: originalContainerHeight
+            ? originalContainerHeight
+            : element.height,
         });
       }
     });
@@ -64,7 +76,7 @@ export const actionBindText = register({
   name: "bindText",
   contextItemLabel: "labels.bindText",
   trackEvent: { category: "element" },
-  contextItemPredicate: (elements, appState) => {
+  predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
 
     if (selectedElements.length === 2) {

src/actions/actionCanvas.tsx

@@ -1,11 +1,5 @@
 import { ColorPicker } from "../components/ColorPicker";
-import {
-  eraser,
-  MoonIcon,
-  SunIcon,
-  ZoomInIcon,
-  ZoomOutIcon,
-} from "../components/icons";
+import { eraser, ZoomInIcon, ZoomOutIcon } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { MIN_ZOOM, THEME, ZOOM_STEP } from "../constants";
 import { getCommonBounds, getNonDeletedElements } from "../element";
@@ -21,14 +15,17 @@ import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
 import { newElementWith } from "../element/mutateElement";
 import { getDefaultAppState, isEraserActive } from "../appState";
-import ClearCanvas from "../components/ClearCanvas";
 import clsx from "clsx";
-import MenuItem from "../components/MenuItem";
-import { getShortcutFromShortcutName } from "./shortcuts";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
   trackEvent: false,
+  predicate: (elements, appState, props, app) => {
+    return (
+      !!app.props.UIOptions.canvasActions.changeViewBackgroundColor &&
+      !appState.viewModeEnabled
+    );
+  },
   perform: (_, appState, value) => {
     return {
       appState: { ...appState, ...value },
@@ -36,6 +33,7 @@ export const actionChangeViewBackgroundColor = register({
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {
+    // FIXME move me to src/components/mainMenu/DefaultItems.tsx
     return (
       <div style={{ position: "relative" }}>
         <ColorPicker
@@ -59,6 +57,12 @@ export const actionChangeViewBackgroundColor = register({
 export const actionClearCanvas = register({
   name: "clearCanvas",
   trackEvent: { category: "canvas" },
+  predicate: (elements, appState, props, app) => {
+    return (
+      !!app.props.UIOptions.canvasActions.clearCanvas &&
+      !appState.viewModeEnabled
+    );
+  },
   perform: (elements, appState, _, app) => {
     app.imageCache.clear();
     return {
@@ -84,12 +88,11 @@ export const actionClearCanvas = register({
       commitToHistory: true,
     };
   },
-
-  PanelComponent: ({ updateData }) => <ClearCanvas onConfirm={updateData} />,
 });
 
 export const actionZoomIn = register({
   name: "zoomIn",
+  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -126,6 +129,7 @@ export const actionZoomIn = register({
 
 export const actionZoomOut = register({
   name: "zoomOut",
+  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -162,6 +166,7 @@ export const actionZoomOut = register({
 
 export const actionResetZoom = register({
   name: "resetZoom",
+  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
@@ -271,6 +276,7 @@ export const actionZoomToSelected = register({
 
 export const actionZoomToFit = register({
   name: "zoomToFit",
+  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (elements, appState) => zoomToFitElements(elements, appState, false),
   keyTest: (event) =>
@@ -282,6 +288,7 @@ export const actionZoomToFit = register({
 
 export const actionToggleTheme = register({
   name: "toggleTheme",
+  viewMode: true,
   trackEvent: { category: "canvas" },
   perform: (_, appState, value) => {
     return {
@@ -293,22 +300,10 @@ export const actionToggleTheme = register({
       commitToHistory: false,
     };
   },
-  PanelComponent: ({ appState, updateData }) => (
-    <MenuItem
-      label={
-        appState.theme === "dark"
-          ? t("buttons.lightMode")
-          : t("buttons.darkMode")
-      }
-      onClick={() => {
-        updateData(appState.theme === THEME.LIGHT ? THEME.DARK : THEME.LIGHT);
-      }}
-      icon={appState.theme === "dark" ? SunIcon : MoonIcon}
-      dataTestId="toggle-dark-mode"
-      shortcut={getShortcutFromShortcutName("toggleTheme")}
-    />
-  ),
   keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
+  predicate: (elements, appState, props, app) => {
+    return !!app.props.UIOptions.canvasActions.toggleTheme;
+  },
 });
 
 export const actionErase = register({

src/actions/actionClipboard.tsx

@@ -3,6 +3,7 @@ import { register } from "./register";
 import {
   copyTextToSystemClipboard,
   copyToClipboard,
+  probablySupportsClipboardBlob,
   probablySupportsClipboardWriteText,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
@@ -23,11 +24,31 @@ export const actionCopy = register({
       commitToHistory: false,
     };
   },
+  predicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
   contextItemLabel: "labels.copy",
   // don't supply a shortcut since we handle this conditionally via onCopy event
   keyTest: undefined,
 });
 
+export const actionPaste = register({
+  name: "paste",
+  trackEvent: { category: "element" },
+  perform: (elements: any, appStates: any, data, app) => {
+    app.pasteFromClipboard(null);
+    return {
+      commitToHistory: false,
+    };
+  },
+  predicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
+  contextItemLabel: "labels.paste",
+  // don't supply a shortcut since we handle this conditionally via onCopy event
+  keyTest: undefined,
+});
+
 export const actionCut = register({
   name: "cut",
   trackEvent: { category: "element" },
@@ -35,6 +56,9 @@ export const actionCut = register({
     actionCopy.perform(elements, appState, data, app);
     return actionDeleteSelected.perform(elements, appState);
   },
+  predicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
   contextItemLabel: "labels.cut",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
@@ -77,6 +101,9 @@ export const actionCopyAsSvg = register({
       };
     }
   },
+  predicate: (elements) => {
+    return probablySupportsClipboardWriteText && elements.length > 0;
+  },
   contextItemLabel: "labels.copyAsSvg",
 });
 
@@ -131,6 +158,9 @@ export const actionCopyAsPng = register({
       };
     }
   },
+  predicate: (elements) => {
+    return probablySupportsClipboardBlob && elements.length > 0;
+  },
   contextItemLabel: "labels.copyAsPng",
   keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
 });
@@ -158,7 +188,7 @@ export const copyText = register({
       commitToHistory: false,
     };
   },
-  contextItemPredicate: (elements, appState) => {
+  predicate: (elements, appState) => {
     return (
       probablySupportsClipboardWriteText &&
       getSelectedElements(elements, appState, true).some(isTextElement)

src/actions/actionExport.tsx

@@ -1,7 +1,6 @@
-import { LoadIcon, questionCircle, saveAs } from "../components/icons";
+import { questionCircle, saveAs } from "../components/icons";
 import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
-import "../components/ToolIcon.scss";
 import { Tooltip } from "../components/Tooltip";
 import { DarkModeToggle } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
@@ -15,12 +14,11 @@ import { getExportSize } from "../scene/export";
 import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { getNonDeletedElements } from "../element";
-import { ActiveFile } from "../components/ActiveFile";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { Theme } from "../element/types";
-import MenuItem from "../components/MenuItem";
-import { getShortcutFromShortcutName } from "./shortcuts";
+
+import "../components/ToolIcon.scss";
 
 export const actionChangeProjectName = register({
   name: "changeProjectName",
@@ -133,6 +131,13 @@ export const actionChangeExportEmbedScene = register({
 export const actionSaveToActiveFile = register({
   name: "saveToActiveFile",
   trackEvent: { category: "export" },
+  predicate: (elements, appState, props, app) => {
+    return (
+      !!app.props.UIOptions.canvasActions.saveToActiveFile &&
+      !!appState.fileHandle &&
+      !appState.viewModeEnabled
+    );
+  },
   perform: async (elements, appState, value, app) => {
     const fileHandleExists = !!appState.fileHandle;
 
@@ -169,16 +174,11 @@ export const actionSaveToActiveFile = register({
   },
   keyTest: (event) =>
     event.key === KEYS.S && event[KEYS.CTRL_OR_CMD] && !event.shiftKey,
-  PanelComponent: ({ updateData, appState }) => (
-    <ActiveFile
-      onSave={() => updateData(null)}
-      fileName={appState.fileHandle?.name}
-    />
-  ),
 });
 
 export const actionSaveFileToDisk = register({
   name: "saveFileToDisk",
+  viewMode: true,
   trackEvent: { category: "export" },
   perform: async (elements, appState, value, app) => {
     try {
@@ -219,6 +219,11 @@ export const actionSaveFileToDisk = register({
 export const actionLoadScene = register({
   name: "loadScene",
   trackEvent: { category: "export" },
+  predicate: (elements, appState, props, app) => {
+    return (
+      !!app.props.UIOptions.canvasActions.loadScene && !appState.viewModeEnabled
+    );
+  },
   perform: async (elements, appState, _, app) => {
     try {
       const {
@@ -246,15 +251,6 @@ export const actionLoadScene = register({
     }
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
-  PanelComponent: ({ updateData }) => (
-    <MenuItem
-      label={t("buttons.load")}
-      icon={LoadIcon}
-      onClick={updateData}
-      dataTestId="load-button"
-      shortcut={getShortcutFromShortcutName("loadScene")}
-    />
-  ),
 });
 
 export const actionExportWithDarkMode = register({

src/actions/actionFlip.ts

@@ -14,6 +14,7 @@ import {
 } from "../element/bounds";
 import { isLinearElement } from "../element/typeChecks";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import { KEYS } from "../keys";
 
 const enableActionFlipHorizontal = (
   elements: readonly ExcalidrawElement[],
@@ -49,7 +50,7 @@ export const actionFlipHorizontal = register({
   },
   keyTest: (event) => event.shiftKey && event.code === "KeyH",
   contextItemLabel: "labels.flipHorizontal",
-  contextItemPredicate: (elements, appState) =>
+  predicate: (elements, appState) =>
     enableActionFlipHorizontal(elements, appState),
 });
 
@@ -63,9 +64,10 @@ export const actionFlipVertical = register({
       commitToHistory: true,
     };
   },
-  keyTest: (event) => event.shiftKey && event.code === "KeyV",
+  keyTest: (event) =>
+    event.shiftKey && event.code === "KeyV" && !event[KEYS.CTRL_OR_CMD],
   contextItemLabel: "labels.flipVertical",
-  contextItemPredicate: (elements, appState) =>
+  predicate: (elements, appState) =>
     enableActionFlipVertical(elements, appState),
 });
 
@@ -151,11 +153,7 @@ const flipElement = (
 
   let initialPointsCoords;
   if (isLinearElement(element)) {
-    initialPointsCoords = getElementPointsCoords(
-      element,
-      element.points,
-      element.strokeSharpness,
-    );
+    initialPointsCoords = getElementPointsCoords(element, element.points);
   }
   const initialElementAbsoluteCoords = getElementAbsoluteCoords(element);
 
@@ -213,11 +211,7 @@ const flipElement = (
     // Adjusting origin because when a beizer curve path exceeds min/max points it offsets the origin.
     // There's still room for improvement since when the line roughness is > 1
     // we still have a small offset of the origin when fliipping the element.
-    const finalPointsCoords = getElementPointsCoords(
-      element,
-      element.points,
-      element.strokeSharpness,
-    );
+    const finalPointsCoords = getElementPointsCoords(element, element.points);
 
     const topLeftCoordsDiff = initialPointsCoords[0] - finalPointsCoords[0];
     const topRightCoordDiff = initialPointsCoords[2] - finalPointsCoords[2];

src/actions/actionGroup.tsx

@@ -129,8 +129,7 @@ export const actionGroup = register({
     };
   },
   contextItemLabel: "labels.group",
-  contextItemPredicate: (elements, appState) =>
-    enableActionGroup(elements, appState),
+  predicate: (elements, appState) => enableActionGroup(elements, appState),
   keyTest: (event) =>
     !event.shiftKey && event[KEYS.CTRL_OR_CMD] && event.key === KEYS.G,
   PanelComponent: ({ elements, appState, updateData }) => (
@@ -193,8 +192,7 @@ export const actionUngroup = register({
     event[KEYS.CTRL_OR_CMD] &&
     event.key === KEYS.G.toUpperCase(),
   contextItemLabel: "labels.ungroup",
-  contextItemPredicate: (elements, appState) =>
-    getSelectedGroupIds(appState).length > 0,
+  predicate: (elements, appState) => getSelectedGroupIds(appState).length > 0,
 
   PanelComponent: ({ elements, appState, updateData }) => (
     <ToolButton

src/actions/actionLinearEditor.ts

@@ -10,7 +10,7 @@ export const actionToggleLinearEditor = register({
   trackEvent: {
     category: "element",
   },
-  contextItemPredicate: (elements, appState) => {
+  predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     if (selectedElements.length === 1 && isLinearElement(selectedElements[0])) {
       return true;

src/actions/actionMenu.tsx

@@ -1,12 +1,10 @@
-import { HamburgerMenuIcon, HelpIcon, palette } from "../components/icons";
+import { HamburgerMenuIcon, palette } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";
-import { HelpButton } from "../components/HelpButton";
-import MenuItem from "../components/MenuItem";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -56,6 +54,7 @@ export const actionToggleEditMenu = register({
 
 export const actionFullScreen = register({
   name: "toggleFullScreen",
+  viewMode: true,
   trackEvent: { category: "canvas", predicate: (appState) => !isFullScreen() },
   perform: () => {
     if (!isFullScreen()) {
@@ -73,6 +72,7 @@ export const actionFullScreen = register({
 
 export const actionShortcuts = register({
   name: "toggleShortcuts",
+  viewMode: true,
   trackEvent: { category: "menu", action: "toggleHelpDialog" },
   perform: (_elements, appState, _, { focusContainer }) => {
     if (appState.openDialog === "help") {
@@ -86,17 +86,5 @@ export const actionShortcuts = register({
       commitToHistory: false,
     };
   },
-  PanelComponent: ({ updateData, isInHamburgerMenu }) =>
-    isInHamburgerMenu ? (
-      <MenuItem
-        label={t("helpDialog.title")}
-        dataTestId="help-menu-item"
-        icon={HelpIcon}
-        onClick={updateData}
-        shortcut="?"
-      />
-    ) : (
-      <HelpButton title={t("helpDialog.title")} onClick={updateData} />
-    ),
   keyTest: (event) => event.key === KEYS.QUESTION_MARK,
 });

src/actions/actionNavigate.tsx

@@ -6,6 +6,7 @@ import { register } from "./register";
 
 export const actionGoToCollaborator = register({
   name: "goToCollaborator",
+  viewMode: true,
   trackEvent: { category: "collab" },
   perform: (_elements, appState, value) => {
     const point = value as Collaborator["pointer"];

src/actions/actionProperties.tsx

@@ -42,6 +42,7 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   FONT_FAMILY,
+  ROUNDNESS,
   VERTICAL_ALIGN,
 } from "../constants";
 import {
@@ -57,7 +58,7 @@ import {
 import {
   isBoundToContainer,
   isLinearElement,
-  isLinearElementType,
+  isUsingAdaptiveRadius,
 } from "../element/typeChecks";
 import {
   Arrowhead,
@@ -72,7 +73,7 @@ import { getLanguage, t } from "../i18n";
 import { KEYS } from "../keys";
 import { randomInteger } from "../random";
 import {
-  canChangeSharpness,
+  canChangeRoundness,
   canHaveArrowheads,
   getCommonAttributeOfSelectedElements,
   getSelectedElements,
@@ -816,16 +817,19 @@ export const actionChangeVerticalAlign = register({
               value: VERTICAL_ALIGN.TOP,
               text: t("labels.alignTop"),
               icon: <TextAlignTopIcon theme={appState.theme} />,
+              testId: "align-top",
             },
             {
               value: VERTICAL_ALIGN.MIDDLE,
               text: t("labels.centerVertically"),
               icon: <TextAlignMiddleIcon theme={appState.theme} />,
+              testId: "align-middle",
             },
             {
               value: VERTICAL_ALIGN.BOTTOM,
               text: t("labels.alignBottom"),
               icon: <TextAlignBottomIcon theme={appState.theme} />,
+              testId: "align-bottom",
             },
           ]}
           value={getFormValue(elements, appState, (element) => {
@@ -845,69 +849,71 @@ export const actionChangeVerticalAlign = register({
   },
 });
 
-export const actionChangeSharpness = register({
-  name: "changeSharpness",
+export const actionChangeRoundness = register({
+  name: "changeRoundness",
   trackEvent: false,
   perform: (elements, appState, value) => {
-    const targetElements = getTargetElements(
-      getNonDeletedElements(elements),
-      appState,
-    );
-    const shouldUpdateForNonLinearElements = targetElements.length
-      ? targetElements.every((el) => !isLinearElement(el))
-      : !isLinearElementType(appState.activeTool.type);
-    const shouldUpdateForLinearElements = targetElements.length
-      ? targetElements.every(isLinearElement)
-      : isLinearElementType(appState.activeTool.type);
     return {
       elements: changeProperty(elements, appState, (el) =>
         newElementWith(el, {
-          strokeSharpness: value,
+          roundness:
+            value === "round"
+              ? {
+                  type: isUsingAdaptiveRadius(el.type)
+                    ? ROUNDNESS.ADAPTIVE_RADIUS
+                    : ROUNDNESS.PROPORTIONAL_RADIUS,
+                }
+              : null,
         }),
       ),
       appState: {
         ...appState,
-        currentItemStrokeSharpness: shouldUpdateForNonLinearElements
-          ? value
-          : appState.currentItemStrokeSharpness,
-        currentItemLinearStrokeSharpness: shouldUpdateForLinearElements
-          ? value
-          : appState.currentItemLinearStrokeSharpness,
+        currentItemRoundness: value,
       },
       commitToHistory: true,
     };
   },
-  PanelComponent: ({ elements, appState, updateData }) => (
-    <fieldset>
-      <legend>{t("labels.edges")}</legend>
-      <ButtonIconSelect
-        group="edges"
-        options={[
-          {
-            value: "sharp",
-            text: t("labels.sharp"),
-            icon: EdgeSharpIcon,
-          },
-          {
-            value: "round",
-            text: t("labels.round"),
-            icon: EdgeRoundIcon,
-          },
-        ]}
-        value={getFormValue(
-          elements,
-          appState,
-          (element) => element.strokeSharpness,
-          (canChangeSharpness(appState.activeTool.type) &&
-            (isLinearElementType(appState.activeTool.type)
-              ? appState.currentItemLinearStrokeSharpness
-              : appState.currentItemStrokeSharpness)) ||
-            null,
-        )}
-        onChange={(value) => updateData(value)}
-      />
-    </fieldset>
-  ),
+  PanelComponent: ({ elements, appState, updateData }) => {
+    const targetElements = getTargetElements(
+      getNonDeletedElements(elements),
+      appState,
+    );
+
+    const hasLegacyRoundness = targetElements.some(
+      (el) => el.roundness?.type === ROUNDNESS.LEGACY,
+    );
+
+    return (
+      <fieldset>
+        <legend>{t("labels.edges")}</legend>
+        <ButtonIconSelect
+          group="edges"
+          options={[
+            {
+              value: "sharp",
+              text: t("labels.sharp"),
+              icon: EdgeSharpIcon,
+            },
+            {
+              value: "round",
+              text: t("labels.round"),
+              icon: EdgeRoundIcon,
+            },
+          ]}
+          value={getFormValue(
+            elements,
+            appState,
+            (element) =>
+              hasLegacyRoundness ? null : element.roundness ? "round" : "sharp",
+            (canChangeRoundness(appState.activeTool.type) &&
+              appState.currentItemRoundness) ||
+              null,
+          )}
+          onChange={(value) => updateData(value)}
+        />
+      </fieldset>
+    );
+  },
 });
 
 export const actionChangeArrowhead = register({

src/actions/actionStyles.ts

@@ -13,7 +13,11 @@ import {
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
 import { getBoundTextElement } from "../element/textElement";
-import { hasBoundTextElement } from "../element/typeChecks";
+import {
+  hasBoundTextElement,
+  canApplyRoundnessTypeToElement,
+  getDefaultRoundnessTypeForElement,
+} from "../element/typeChecks";
 import { getSelectedElements } from "../scene";
 
 // `copiedStyles` is exported only for tests.
@@ -77,6 +81,14 @@ export const actionPasteStyles = register({
             fillStyle: elementStylesToCopyFrom?.fillStyle,
             opacity: elementStylesToCopyFrom?.opacity,
             roughness: elementStylesToCopyFrom?.roughness,
+            roundness: elementStylesToCopyFrom.roundness
+              ? canApplyRoundnessTypeToElement(
+                  elementStylesToCopyFrom.roundness.type,
+                  element,
+                )
+                ? elementStylesToCopyFrom.roundness
+                : getDefaultRoundnessTypeForElement(element)
+              : null,
           });
 
           if (isTextElement(newElement)) {

src/actions/actionToggleGridMode.tsx

@@ -5,6 +5,7 @@ import { AppState } from "../types";
 
 export const actionToggleGridMode = register({
   name: "gridMode",
+  viewMode: true,
   trackEvent: {
     category: "canvas",
     predicate: (appState) => !appState.gridSize,
@@ -19,6 +20,9 @@ export const actionToggleGridMode = register({
     };
   },
   checked: (appState: AppState) => appState.gridSize !== null,
+  predicate: (element, appState, props) => {
+    return typeof props.gridModeEnabled === "undefined";
+  },
   contextItemLabel: "labels.showGrid",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });

src/actions/actionToggleLock.ts

@@ -41,15 +41,9 @@ export const actionToggleLock = register({
         : "labels.elementLock.lock";
     }
 
-    if (selected.length > 1) {
-      return getOperation(selected) === "lock"
-        ? "labels.elementLock.lockAll"
-        : "labels.elementLock.unlockAll";
-    }
-
-    throw new Error(
-      "Unexpected zero elements to lock/unlock. This should never happen.",
-    );
+    return getOperation(selected) === "lock"
+      ? "labels.elementLock.lockAll"
+      : "labels.elementLock.unlockAll";
   },
   keyTest: (event, appState, elements) => {
     return (

src/actions/actionToggleStats.tsx

@@ -3,6 +3,7 @@ import { CODES, KEYS } from "../keys";
 
 export const actionToggleStats = register({
   name: "stats",
+  viewMode: true,
   trackEvent: { category: "menu" },
   perform(elements, appState) {
     return {

src/actions/actionToggleViewMode.tsx

@@ -3,6 +3,7 @@ import { register } from "./register";
 
 export const actionToggleViewMode = register({
   name: "viewMode",
+  viewMode: true,
   trackEvent: {
     category: "canvas",
     predicate: (appState) => !appState.viewModeEnabled,
@@ -17,6 +18,9 @@ export const actionToggleViewMode = register({
     };
   },
   checked: (appState) => appState.viewModeEnabled,
+  predicate: (elements, appState, appProps) => {
+    return typeof appProps.viewModeEnabled === "undefined";
+  },
   contextItemLabel: "labels.viewMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.R,

src/actions/actionToggleZenMode.tsx

@@ -3,6 +3,7 @@ import { register } from "./register";
 
 export const actionToggleZenMode = register({
   name: "zenMode",
+  viewMode: true,
   trackEvent: {
     category: "canvas",
     predicate: (appState) => !appState.zenModeEnabled,
@@ -17,6 +18,9 @@ export const actionToggleZenMode = register({
     };
   },
   checked: (appState) => appState.zenModeEnabled,
+  predicate: (elements, appState, appProps) => {
+    return typeof appProps.zenModeEnabled === "undefined";
+  },
   contextItemLabel: "buttons.zenMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,

src/actions/manager.tsx

@@ -9,7 +9,6 @@ import {
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppClassProperties, AppState } from "../types";
-import { MODES } from "../constants";
 import { trackEvent } from "../analytics";
 
 const trackAction = (
@@ -103,11 +102,8 @@ export class ActionManager {
 
     const action = data[0];
 
-    const { viewModeEnabled } = this.getAppState();
-    if (viewModeEnabled) {
-      if (!Object.values(MODES).includes(data[0].name)) {
-        return false;
-      }
+    if (this.getAppState().viewModeEnabled && action.viewMode !== true) {
+      return false;
     }
 
     const elements = this.getElementsIncludingDeleted();
@@ -135,11 +131,7 @@ export class ActionManager {
   /**
    * @param data additional data sent to the PanelComponent
    */
-  renderAction = (
-    name: ActionName,
-    data?: PanelComponentProps["data"],
-    isInHamburgerMenu = false,
-  ) => {
+  renderAction = (name: ActionName, data?: PanelComponentProps["data"]) => {
     const canvasActions = this.app.props.UIOptions.canvasActions;
 
     if (
@@ -174,11 +166,20 @@ export class ActionManager {
           updateData={updateData}
           appProps={this.app.props}
           data={data}
-          isInHamburgerMenu={isInHamburgerMenu}
         />
       );
     }
 
     return null;
   };
+
+  isActionEnabled = (action: Action) => {
+    const elements = this.getElementsIncludingDeleted();
+    const appState = this.getAppState();
+
+    return (
+      !action.predicate ||
+      action.predicate(elements, appState, this.app.props, this.app)
+    );
+  };
 }

src/actions/shortcuts.ts

@@ -48,7 +48,7 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   copyStyles: [getShortcutKey("CtrlOrCmd+Alt+C")],
   pasteStyles: [getShortcutKey("CtrlOrCmd+Alt+V")],
   selectAll: [getShortcutKey("CtrlOrCmd+A")],
-  deleteSelectedElements: [getShortcutKey("Del")],
+  deleteSelectedElements: [getShortcutKey("Delete")],
   duplicateSelection: [
     getShortcutKey("CtrlOrCmd+D"),
     getShortcutKey(`Alt+${t("helpDialog.drag")}`),

src/actions/types.ts

@@ -91,7 +91,7 @@ export type ActionName =
   | "ungroup"
   | "goToCollaborator"
   | "addToLibrary"
-  | "changeSharpness"
+  | "changeRoundness"
   | "alignTop"
   | "alignBottom"
   | "alignLeft"
@@ -124,9 +124,7 @@ export type PanelComponentProps = {
 
 export interface Action {
   name: ActionName;
-  PanelComponent?: React.FC<
-    PanelComponentProps & { isInHamburgerMenu: boolean }
-  >;
+  PanelComponent?: React.FC<PanelComponentProps>;
   perform: ActionFn;
   keyPriority?: number;
   keyTest?: (
@@ -140,9 +138,11 @@ export interface Action {
         elements: readonly ExcalidrawElement[],
         appState: Readonly<AppState>,
       ) => string);
-  contextItemPredicate?: (
+  predicate?: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,
+    appProps: ExcalidrawProps,
+    app: AppClassProperties,
   ) => boolean;
   checked?: (appState: Readonly<AppState>) => boolean;
   trackEvent:
@@ -164,4 +164,7 @@ export interface Action {
           value: any,
         ) => boolean;
       };
+  /** if set to `true`, allow action to be performed in viewMode.
+   *  Defaults to `false` */
+  viewMode?: boolean;
 }

src/appState.ts

@@ -28,12 +28,11 @@ export const getDefaultAppState = (): Omit<
     currentItemFillStyle: "hachure",
     currentItemFontFamily: DEFAULT_FONT_FAMILY,
     currentItemFontSize: DEFAULT_FONT_SIZE,
-    currentItemLinearStrokeSharpness: "round",
     currentItemOpacity: 100,
     currentItemRoughness: 1,
     currentItemStartArrowhead: null,
     currentItemStrokeColor: oc.black,
-    currentItemStrokeSharpness: "sharp",
+    currentItemRoundness: "round",
     currentItemStrokeStyle: "solid",
     currentItemStrokeWidth: 1,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
@@ -65,6 +64,7 @@ export const getDefaultAppState = (): Omit<
     lastPointerDownWith: "mouse",
     multiElement: null,
     name: `${t("labels.untitled")}-${getDateTime()}`,
+    contextMenu: null,
     openMenu: null,
     openPopup: null,
     openSidebar: null,
@@ -120,7 +120,7 @@ const APP_STATE_STORAGE_CONF = (<
   currentItemFillStyle: { browser: true, export: false, server: false },
   currentItemFontFamily: { browser: true, export: false, server: false },
   currentItemFontSize: { browser: true, export: false, server: false },
-  currentItemLinearStrokeSharpness: {
+  currentItemRoundness: {
     browser: true,
     export: false,
     server: false,
@@ -129,7 +129,6 @@ const APP_STATE_STORAGE_CONF = (<
   currentItemRoughness: { browser: true, export: false, server: false },
   currentItemStartArrowhead: { browser: true, export: false, server: false },
   currentItemStrokeColor: { browser: true, export: false, server: false },
-  currentItemStrokeSharpness: { browser: true, export: false, server: false },
   currentItemStrokeStyle: { browser: true, export: false, server: false },
   currentItemStrokeWidth: { browser: true, export: false, server: false },
   currentItemTextAlign: { browser: true, export: false, server: false },
@@ -159,6 +158,7 @@ const APP_STATE_STORAGE_CONF = (<
   name: { browser: true, export: false, server: false },
   offsetLeft: { browser: false, export: false, server: false },
   offsetTop: { browser: false, export: false, server: false },
+  contextMenu: { browser: false, export: false, server: false },
   openMenu: { browser: true, export: false, server: false },
   openPopup: { browser: false, export: false, server: false },
   openSidebar: { browser: true, export: false, server: false },

src/charts.ts

@@ -172,7 +172,7 @@ const commonProps = {
   opacity: 100,
   roughness: 1,
   strokeColor: colors.elementStroke[0],
-  strokeSharpness: "sharp",
+  roundness: null,
   strokeStyle: "solid",
   strokeWidth: 1,
   verticalAlign: VERTICAL_ALIGN.MIDDLE,
@@ -322,7 +322,7 @@ const chartBaseElements = (
         text: spreadsheet.title,
         x: x + chartWidth / 2,
         y: y - BAR_HEIGHT - BAR_GAP * 2 - DEFAULT_FONT_SIZE,
-        strokeSharpness: "sharp",
+        roundness: null,
         strokeStyle: "solid",
         textAlign: "center",
       })

src/clipboard.ts

@@ -109,16 +109,16 @@ const parsePotentialSpreadsheet = (
  * Retrieves content from system clipboard (either from ClipboardEvent or
  *  via async clipboard API if supported)
  */
-const getSystemClipboard = async (
+export const getSystemClipboard = async (
   event: ClipboardEvent | null,
 ): Promise<string> => {
   try {
     const text = event
-      ? event.clipboardData?.getData("text/plain").trim()
+      ? event.clipboardData?.getData("text/plain")
       : probablySupportsClipboardReadText &&
         (await navigator.clipboard.readText());
 
-    return text || "";
+    return (text || "").trim();
   } catch {
     return "";
   }
@@ -129,19 +129,25 @@ const getSystemClipboard = async (
  */
 export const parseClipboard = async (
   event: ClipboardEvent | null,
+  isPlainPaste = false,
 ): Promise<ClipboardData> => {
   const systemClipboard = await getSystemClipboard(event);
 
   // if system clipboard empty, couldn't be resolved, or contains previously
   // copied excalidraw scene as SVG, fall back to previously copied excalidraw
   // elements
-  if (!systemClipboard || systemClipboard.includes(SVG_EXPORT_TAG)) {
+  if (
+    !systemClipboard ||
+    (!isPlainPaste && systemClipboard.includes(SVG_EXPORT_TAG))
+  ) {
     return getAppClipboard();
   }
 
   // if system clipboard contains spreadsheet, use it even though it's
   // technically possible it's staler than in-app clipboard
-  const spreadsheetResult = parsePotentialSpreadsheet(systemClipboard);
+  const spreadsheetResult =
+    !isPlainPaste && parsePotentialSpreadsheet(systemClipboard);
+
   if (spreadsheetResult) {
     return spreadsheetResult;
   }
@@ -154,6 +160,9 @@ export const parseClipboard = async (
       return {
         elements: systemClipboardData.elements,
         files: systemClipboardData.files,
+        text: isPlainPaste
+          ? JSON.stringify(systemClipboardData.elements, null, 2)
+          : undefined,
       };
     }
   } catch (e) {}
@@ -161,7 +170,12 @@ export const parseClipboard = async (
   // unless we set a flag to prefer in-app clipboard because browser didn't
   // support storing to system clipboard on copy
   return PREFER_APP_CLIPBOARD && appClipboardData.elements
-    ? appClipboardData
+    ? {
+        ...appClipboardData,
+        text: isPlainPaste
+          ? JSON.stringify(appClipboardData.elements, null, 2)
+          : undefined,
+      }
     : { text: systemClipboard };
 };
 

src/components/Actions.tsx

@@ -5,7 +5,7 @@ import { ExcalidrawElement, PointerType } from "../element/types";
 import { t } from "../i18n";
 import { useDevice } from "../components/App";
 import {
-  canChangeSharpness,
+  canChangeRoundness,
   canHaveArrowheads,
   getTargetElements,
   hasBackground,
@@ -25,11 +25,12 @@ import Stack from "./Stack";
 import { ToolButton } from "./ToolButton";
 import { hasStrokeColor } from "../scene/comparisons";
 import { trackEvent } from "../analytics";
-import { hasBoundTextElement, isBoundToContainer } from "../element/typeChecks";
+import { hasBoundTextElement } from "../element/typeChecks";
 import clsx from "clsx";
 import { actionToggleZenMode } from "../actions";
 import "./Actions.scss";
 import { Tooltip } from "./Tooltip";
+import { shouldAllowVerticalAlign } from "../element/textElement";
 
 export const SelectedShapeActions = ({
   appState,
@@ -109,9 +110,9 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {(canChangeSharpness(appState.activeTool.type) ||
-        targetElements.some((element) => canChangeSharpness(element.type))) && (
-        <>{renderAction("changeSharpness")}</>
+      {(canChangeRoundness(appState.activeTool.type) ||
+        targetElements.some((element) => canChangeRoundness(element.type))) && (
+        <>{renderAction("changeRoundness")}</>
       )}
 
       {(hasText(appState.activeTool.type) ||
@@ -125,10 +126,8 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {targetElements.some(
-        (element) =>
-          hasBoundTextElement(element) || isBoundToContainer(element),
-      ) && renderAction("changeVerticalAlign")}
+      {shouldAllowVerticalAlign(targetElements) &&
+        renderAction("changeVerticalAlign")}
       {(canHaveArrowheads(appState.activeTool.type) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>

src/components/ActiveFile.tsx

@@ -1,23 +0,0 @@
-// TODO barnabasmolnar/editor-redesign
-// this icon is not great
-import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import { save } from "../components/icons";
-import { t } from "../i18n";
-
-import "./ActiveFile.scss";
-import MenuItem from "./MenuItem";
-
-type ActiveFileProps = {
-  fileName?: string;
-  onSave: () => void;
-};
-
-export const ActiveFile = ({ fileName, onSave }: ActiveFileProps) => (
-  <MenuItem
-    label={`${t("buttons.save")}`}
-    shortcut={getShortcutFromShortcutName("saveScene")}
-    dataTestId="save-button"
-    onClick={onSave}
-    icon={save}
-  />
-);

src/components/Avatar.scss

@@ -4,8 +4,8 @@
   .Avatar {
     width: 1.25rem;
     height: 1.25rem;
+    position: relative;
     border-radius: 100%;
-    outline: 2px solid var(--avatar-border-color);
     outline-offset: 2px;
     display: flex;
     justify-content: center;
@@ -21,5 +21,16 @@
       height: 100%;
       border-radius: 100%;
     }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: -3px;
+      right: -3px;
+      bottom: -3px;
+      left: -3px;
+      border: 1px solid var(--avatar-border-color);
+      border-radius: 100%;
+    }
   }
 }

src/components/Button.scss

@@ -0,0 +1,7 @@
+@import "../css/theme";
+
+.excalidraw {
+  .excalidraw-button {
+    @include outlineButtonStyles;
+  }
+}

src/components/Button.tsx

@@ -0,0 +1,35 @@
+import "./Button.scss";
+
+interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  type?: "button" | "submit" | "reset";
+  onSelect: () => any;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * A generic button component that follows Excalidraw's design system.
+ * Style can be customised using `className` or `style` prop.
+ * Accepts all props that a regular `button` element accepts.
+ */
+export const Button = ({
+  type = "button",
+  onSelect,
+  children,
+  className = "",
+  ...rest
+}: ButtonProps) => {
+  return (
+    <button
+      onClick={(event) => {
+        onSelect();
+        rest.onClick?.(event);
+      }}
+      type={type}
+      className={`excalidraw-button ${className}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};

src/components/ClearCanvas.tsx

@@ -1,39 +0,0 @@
-import { useState } from "react";
-import { t } from "../i18n";
-import { TrashIcon } from "./icons";
-
-import ConfirmDialog from "./ConfirmDialog";
-import MenuItem from "./MenuItem";
-
-const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
-  const [showDialog, setShowDialog] = useState(false);
-  const toggleDialog = () => {
-    setShowDialog(!showDialog);
-  };
-
-  return (
-    <>
-      <MenuItem
-        label={t("buttons.clearReset")}
-        icon={TrashIcon}
-        onClick={toggleDialog}
-        dataTestId="clear-canvas-button"
-      />
-
-      {showDialog && (
-        <ConfirmDialog
-          onConfirm={() => {
-            onConfirm();
-            toggleDialog();
-          }}
-          onCancel={toggleDialog}
-          title={t("clearCanvasDialog.title")}
-        >
-          <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
-        </ConfirmDialog>
-      )}
-    </>
-  );
-};
-
-export default ClearCanvas;

src/components/CollabButton.tsx

@@ -1,49 +0,0 @@
-import { t } from "../i18n";
-import { UsersIcon } from "./icons";
-
-import "./CollabButton.scss";
-import MenuItem from "./MenuItem";
-import clsx from "clsx";
-
-const CollabButton = ({
-  isCollaborating,
-  collaboratorCount,
-  onClick,
-  isInHamburgerMenu = true,
-}: {
-  isCollaborating: boolean;
-  collaboratorCount: number;
-  onClick: () => void;
-  isInHamburgerMenu?: boolean;
-}) => {
-  return (
-    <>
-      {isInHamburgerMenu ? (
-        <MenuItem
-          label={t("labels.liveCollaboration")}
-          dataTestId="collab-button"
-          icon={UsersIcon}
-          onClick={onClick}
-          isCollaborating={isCollaborating}
-        />
-      ) : (
-        <button
-          className={clsx("collab-button", { active: isCollaborating })}
-          type="button"
-          onClick={onClick}
-          style={{ position: "relative" }}
-          title={t("labels.liveCollaboration")}
-        >
-          {UsersIcon}
-          {collaboratorCount > 0 && (
-            <div className="CollabButton-collaborators">
-              {collaboratorCount}
-            </div>
-          )}
-        </button>
-      )}
-    </>
-  );
-};
-
-export default CollabButton;

src/components/ColorPicker.tsx

@@ -66,10 +66,13 @@ const getColor = (color: string): string | null => {
     return color;
   }
 
-  return isValidColor(color)
-    ? color
-    : isValidColor(`#${color}`)
+  // testing for `#` first fixes a bug on Electron (more specfically, an
+  // Obsidian popout window), where a hex color without `#` is (incorrectly)
+  // considered valid
+  return isValidColor(`#${color}`)
     ? `#${color}`
+    : isValidColor(color)
+    ? color
     : null;
 };
 

src/components/ConfirmDialog.tsx

@@ -3,9 +3,9 @@ import { Dialog, DialogProps } from "./Dialog";
 
 import "./ConfirmDialog.scss";
 import DialogActionButton from "./DialogActionButton";
-import { isMenuOpenAtom } from "./App";
-import { isDropdownOpenAtom } from "./App";
 import { useSetAtom } from "jotai";
+import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
+import { useExcalidrawSetAppState } from "./App";
 
 interface Props extends Omit<DialogProps, "onCloseRequest"> {
   onConfirm: () => void;
@@ -23,9 +23,8 @@ const ConfirmDialog = (props: Props) => {
     className = "",
     ...rest
   } = props;
-
-  const setIsMenuOpen = useSetAtom(isMenuOpenAtom);
-  const setIsDropdownOpen = useSetAtom(isDropdownOpenAtom);
+  const setAppState = useExcalidrawSetAppState();
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
 
   return (
     <Dialog
@@ -39,16 +38,16 @@ const ConfirmDialog = (props: Props) => {
         <DialogActionButton
           label={cancelText}
           onClick={() => {
-            setIsMenuOpen(false);
-            setIsDropdownOpen(false);
+            setAppState({ openMenu: null });
+            setIsLibraryMenuOpen(false);
             onCancel();
           }}
         />
         <DialogActionButton
           label={confirmText}
           onClick={() => {
-            setIsMenuOpen(false);
-            setIsDropdownOpen(false);
+            setAppState({ openMenu: null });
+            setIsLibraryMenuOpen(false);
             onConfirm();
           }}
           actionType="danger"

src/components/ContextMenu.scss

@@ -19,7 +19,7 @@
     color: var(--popup-text-color);
   }
 
-  .context-menu-option {
+  .context-menu-item {
     position: relative;
     width: 100%;
     min-width: 9.5rem;
@@ -43,16 +43,16 @@
     }
 
     &.dangerous {
-      .context-menu-option__label {
+      .context-menu-item__label {
         color: $oc-red-7;
       }
     }
 
-    .context-menu-option__label {
+    .context-menu-item__label {
       justify-self: start;
       margin-inline-end: 20px;
     }
-    .context-menu-option__shortcut {
+    .context-menu-item__shortcut {
       justify-self: end;
       opacity: 0.6;
       font-family: inherit;
@@ -60,37 +60,37 @@
     }
   }
 
-  .context-menu-option:hover {
+  .context-menu-item:hover {
     color: var(--popup-bg-color);
     background-color: var(--select-highlight-color);
 
     &.dangerous {
-      .context-menu-option__label {
+      .context-menu-item__label {
         color: var(--popup-bg-color);
       }
       background-color: $oc-red-6;
     }
   }
 
-  .context-menu-option:focus {
+  .context-menu-item:focus {
     z-index: 1;
   }
 
   @include isMobile {
-    .context-menu-option {
+    .context-menu-item {
       display: block;
 
-      .context-menu-option__label {
+      .context-menu-item__label {
         margin-inline-end: 0;
       }
 
-      .context-menu-option__shortcut {
+      .context-menu-item__shortcut {
         display: none;
       }
     }
   }
 
-  .context-menu-option-separator {
+  .context-menu-item-separator {
     border: none;
     border-top: 1px solid $oc-gray-5;
   }

src/components/ContextMenu.tsx

@@ -1,4 +1,3 @@
-import { render, unmountComponentAtNode } from "react-dom";
 import clsx from "clsx";
 import { Popover } from "./Popover";
 import { t } from "../i18n";
@@ -10,140 +9,116 @@ import {
 } from "../actions/shortcuts";
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
-import { AppState } from "../types";
-import { NonDeletedExcalidrawElement } from "../element/types";
+import {
+  useExcalidrawAppState,
+  useExcalidrawElements,
+  useExcalidrawSetAppState,
+} from "./App";
+import React from "react";
 
-export type ContextMenuOption = "separator" | Action;
+export type ContextMenuItem = typeof CONTEXT_MENU_SEPARATOR | Action;
+
+export type ContextMenuItems = (ContextMenuItem | false | null | undefined)[];
 
 type ContextMenuProps = {
-  options: ContextMenuOption[];
-  onCloseRequest?(): void;
+  actionManager: ActionManager;
+  items: ContextMenuItems;
   top: number;
   left: number;
-  actionManager: ActionManager;
-  appState: Readonly<AppState>;
-  elements: readonly NonDeletedExcalidrawElement[];
 };
 
-const ContextMenu = ({
-  options,
-  onCloseRequest,
-  top,
-  left,
-  actionManager,
-  appState,
-  elements,
-}: ContextMenuProps) => {
-  return (
-    <Popover
-      onCloseRequest={onCloseRequest}
-      top={top}
-      left={left}
-      fitInViewport={true}
-      offsetLeft={appState.offsetLeft}
-      offsetTop={appState.offsetTop}
-      viewportWidth={appState.width}
-      viewportHeight={appState.height}
-    >
-      <ul
-        className="context-menu"
-        onContextMenu={(event) => event.preventDefault()}
-      >
-        {options.map((option, idx) => {
-          if (option === "separator") {
-            return <hr key={idx} className="context-menu-option-separator" />;
-          }
+export const CONTEXT_MENU_SEPARATOR = "separator";
 
-          const actionName = option.name;
-          let label = "";
-          if (option.contextItemLabel) {
-            if (typeof option.contextItemLabel === "function") {
-              label = t(option.contextItemLabel(elements, appState));
-            } else {
-              label = t(option.contextItemLabel);
-            }
-          }
-          return (
-            <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
-              <button
-                className={clsx("context-menu-option", {
-                  dangerous: actionName === "deleteSelectedElements",
-                  checkmark: option.checked?.(appState),
-                })}
-                onClick={() =>
-                  actionManager.executeAction(option, "contextMenu")
-                }
-              >
-                <div className="context-menu-option__label">{label}</div>
-                <kbd className="context-menu-option__shortcut">
-                  {actionName
-                    ? getShortcutFromShortcutName(actionName as ShortcutName)
-                    : ""}
-                </kbd>
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-    </Popover>
-  );
-};
+export const ContextMenu = React.memo(
+  ({ actionManager, items, top, left }: ContextMenuProps) => {
+    const appState = useExcalidrawAppState();
+    const setAppState = useExcalidrawSetAppState();
+    const elements = useExcalidrawElements();
 
-const contextMenuNodeByContainer = new WeakMap<HTMLElement, HTMLDivElement>();
-
-const getContextMenuNode = (container: HTMLElement): HTMLDivElement => {
-  let contextMenuNode = contextMenuNodeByContainer.get(container);
-  if (contextMenuNode) {
-    return contextMenuNode;
-  }
-  contextMenuNode = document.createElement("div");
-  container
-    .querySelector(".excalidraw-contextMenuContainer")!
-    .appendChild(contextMenuNode);
-  contextMenuNodeByContainer.set(container, contextMenuNode);
-  return contextMenuNode;
-};
-
-type ContextMenuParams = {
-  options: (ContextMenuOption | false | null | undefined)[];
-  top: ContextMenuProps["top"];
-  left: ContextMenuProps["left"];
-  actionManager: ContextMenuProps["actionManager"];
-  appState: Readonly<AppState>;
-  container: HTMLElement;
-  elements: readonly NonDeletedExcalidrawElement[];
-};
-
-const handleClose = (container: HTMLElement) => {
-  const contextMenuNode = contextMenuNodeByContainer.get(container);
-  if (contextMenuNode) {
-    unmountComponentAtNode(contextMenuNode);
-    contextMenuNode.remove();
-    contextMenuNodeByContainer.delete(container);
-  }
-};
-
-export default {
-  push(params: ContextMenuParams) {
-    const options = Array.of<ContextMenuOption>();
-    params.options.forEach((option) => {
-      if (option) {
-        options.push(option);
+    const filteredItems = items.reduce((acc: ContextMenuItem[], item) => {
+      if (
+        item &&
+        (item === CONTEXT_MENU_SEPARATOR ||
+          !item.predicate ||
+          item.predicate(
+            elements,
+            appState,
+            actionManager.app.props,
+            actionManager.app,
+          ))
+      ) {
+        acc.push(item);
       }
-    });
-    if (options.length) {
-      render(
-        <ContextMenu
-          top={params.top}
-          left={params.left}
-          options={options}
-          onCloseRequest={() => handleClose(params.container)}
-          actionManager={params.actionManager}
-          appState={params.appState}
-          elements={params.elements}
-        />,
-        getContextMenuNode(params.container),
-      );
-    }
+      return acc;
+    }, []);
+
+    return (
+      <Popover
+        onCloseRequest={() => setAppState({ contextMenu: null })}
+        top={top}
+        left={left}
+        fitInViewport={true}
+        offsetLeft={appState.offsetLeft}
+        offsetTop={appState.offsetTop}
+        viewportWidth={appState.width}
+        viewportHeight={appState.height}
+      >
+        <ul
+          className="context-menu"
+          onContextMenu={(event) => event.preventDefault()}
+        >
+          {filteredItems.map((item, idx) => {
+            if (item === CONTEXT_MENU_SEPARATOR) {
+              if (
+                !filteredItems[idx - 1] ||
+                filteredItems[idx - 1] === CONTEXT_MENU_SEPARATOR
+              ) {
+                return null;
+              }
+              return <hr key={idx} className="context-menu-item-separator" />;
+            }
+
+            const actionName = item.name;
+            let label = "";
+            if (item.contextItemLabel) {
+              if (typeof item.contextItemLabel === "function") {
+                label = t(item.contextItemLabel(elements, appState));
+              } else {
+                label = t(item.contextItemLabel);
+              }
+            }
+
+            return (
+              <li
+                key={idx}
+                data-testid={actionName}
+                onClick={() => {
+                  // we need update state before executing the action in case
+                  // the action uses the appState it's being passed (that still
+                  // contains a defined contextMenu) to return the next state.
+                  setAppState({ contextMenu: null }, () => {
+                    actionManager.executeAction(item, "contextMenu");
+                  });
+                }}
+              >
+                <button
+                  className={clsx("context-menu-item", {
+                    dangerous: actionName === "deleteSelectedElements",
+                    checkmark: item.checked?.(appState),
+                  })}
+                >
+                  <div className="context-menu-item__label">{label}</div>
+                  <kbd className="context-menu-item__shortcut">
+                    {actionName
+                      ? getShortcutFromShortcutName(actionName as ShortcutName)
+                      : ""}
+                  </kbd>
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </Popover>
+    );
   },
-};
+);

src/components/Dialog.tsx

@@ -2,7 +2,11 @@ import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import { useExcalidrawContainer, useDevice } from "../components/App";
+import {
+  useExcalidrawContainer,
+  useDevice,
+  useExcalidrawSetAppState,
+} from "../components/App";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, CloseIcon } from "./icons";
@@ -10,8 +14,8 @@ import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";
 import { queryFocusableElements } from "../utils";
-import { isMenuOpenAtom, isDropdownOpenAtom } from "./App";
 import { useSetAtom } from "jotai";
+import { isLibraryMenuOpenAtom } from "./LibraryMenuHeaderContent";
 
 export interface DialogProps {
   children: React.ReactNode;
@@ -67,12 +71,12 @@ export const Dialog = (props: DialogProps) => {
     return () => islandNode.removeEventListener("keydown", handleKeyDown);
   }, [islandNode, props.autofocus]);
 
-  const setIsMenuOpen = useSetAtom(isMenuOpenAtom);
-  const setIsDropdownOpen = useSetAtom(isDropdownOpenAtom);
+  const setAppState = useExcalidrawSetAppState();
+  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
 
   const onClose = () => {
-    setIsMenuOpen(false);
-    setIsDropdownOpen(false);
+    setAppState({ openMenu: null });
+    setIsLibraryMenuOpen(false);
     (lastActiveElement as HTMLElement).focus();
     props.onCloseRequest();
   };

src/components/FixedSideContainer.scss

@@ -1,3 +1,5 @@
+@import "../css/variables.module";
+
 .excalidraw {
   .FixedSideContainer {
     position: absolute;
@@ -9,10 +11,10 @@
   }
 
   .FixedSideContainer_side_top {
-    left: 1rem;
-    top: 1rem;
-    right: 1rem;
-    bottom: 1rem;
+    left: var(--editor-container-padding);
+    top: var(--editor-container-padding);
+    right: var(--editor-container-padding);
+    bottom: var(--editor-container-padding);
     z-index: 2;
   }
 

src/components/HelpDialog.tsx

@@ -140,11 +140,11 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             />
             <Shortcut
               label={t("toolBar.line")}
-              shortcuts={[KEYS.P, KEYS["6"]]}
+              shortcuts={[KEYS.L, KEYS["6"]]}
             />
             <Shortcut
               label={t("toolBar.freedraw")}
-              shortcuts={["Shift + P", KEYS["7"]]}
+              shortcuts={[KEYS.P, KEYS["7"]]}
             />
             <Shortcut
               label={t("toolBar.text")}
@@ -157,7 +157,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             />
             <Shortcut
               label={t("helpDialog.editSelectedShape")}
-              shortcuts={[getShortcutKey("Enter"), t("helpDialog.doubleClick")]}
+              shortcuts={[
+                getShortcutKey("CtrlOrCmd+Enter"),
+                getShortcutKey(`CtrlOrCmd + ${t("helpDialog.doubleClick")}`),
+              ]}
             />
             <Shortcut
               label={t("helpDialog.textNewLine")}
@@ -227,6 +230,14 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("helpDialog.zoomToSelection")}
               shortcuts={["Shift+2"]}
             />
+            <Shortcut
+              label={t("helpDialog.movePageUpDown")}
+              shortcuts={["PgUp/PgDn"]}
+            />
+            <Shortcut
+              label={t("helpDialog.movePageLeftRight")}
+              shortcuts={["Shift+PgUp/PgDn"]}
+            />
             <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
             <Shortcut
               label={t("buttons.zenMode")}
@@ -289,6 +300,10 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("labels.paste")}
               shortcuts={[getShortcutKey("CtrlOrCmd+V")]}
             />
+            <Shortcut
+              label={t("labels.pasteAsPlaintext")}
+              shortcuts={[getShortcutKey("CtrlOrCmd+Shift+V")]}
+            />
             <Shortcut
               label={t("labels.copyAsPng")}
               shortcuts={[getShortcutKey("Shift+Alt+C")]}
@@ -303,7 +318,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             />
             <Shortcut
               label={t("labels.delete")}
-              shortcuts={[getShortcutKey("Del")]}
+              shortcuts={[getShortcutKey("Delete")]}
             />
             <Shortcut
               label={t("labels.sendToBack")}

src/components/ImageExportDialog.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
-import { render, unmountComponentAtNode } from "react-dom";
 import { probablySupportsClipboardBlob } from "../clipboard";
 import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
-import { CanvasError } from "../errors";
 import { t } from "../i18n";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas } from "../scene/export";
@@ -33,19 +31,6 @@ export const ErrorCanvasPreview = () => {
   );
 };
 
-const renderPreview = (
-  content: HTMLCanvasElement | Error,
-  previewNode: HTMLDivElement,
-) => {
-  unmountComponentAtNode(previewNode);
-  previewNode.innerHTML = "";
-  if (content instanceof HTMLCanvasElement) {
-    previewNode.appendChild(content);
-  } else {
-    render(<ErrorCanvasPreview />, previewNode);
-  }
-};
-
 export type ExportCB = (
   elements: readonly NonDeletedExcalidrawElement[],
   scale?: number,
@@ -99,6 +84,7 @@ const ImageExportModal = ({
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
   const previewRef = useRef<HTMLDivElement>(null);
   const { exportBackground, viewBackgroundColor } = appState;
+  const [renderError, setRenderError] = useState<Error | null>(null);
 
   const exportedElements = exportSelected
     ? getSelectedElements(elements, appState, true)
@@ -119,15 +105,16 @@ const ImageExportModal = ({
       exportPadding,
     })
       .then((canvas) => {
+        setRenderError(null);
         // if converting to blob fails, there's some problem that will
         // likely prevent preview and export (e.g. canvas too big)
         return canvasToBlob(canvas).then(() => {
-          renderPreview(canvas, previewNode);
+          previewNode.replaceChildren(canvas);
         });
       })
       .catch((error) => {
         console.error(error);
-        renderPreview(new CanvasError(), previewNode);
+        setRenderError(error);
       });
   }, [
     appState,
@@ -140,7 +127,9 @@ const ImageExportModal = ({
 
   return (
     <div className="ExportDialog">
-      <div className="ExportDialog__preview" ref={previewRef} />
+      <div className="ExportDialog__preview" ref={previewRef}>
+        {renderError && <ErrorCanvasPreview />}
+      </div>
       {supportsContextFilters &&
         actionManager.renderAction("exportWithDarkMode")}
       <div style={{ display: "grid", gridTemplateColumns: "1fr" }}>

src/components/JSONExportDialog.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React from "react";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 
 import { AppState, ExportOpts, BinaryFiles } from "../types";
 import { Dialog } from "./Dialog";
-import { ExportIcon, exportToFileIcon, LinkIcon } from "./icons";
+import { exportToFileIcon, LinkIcon } from "./icons";
 import { ToolButton } from "./ToolButton";
 import { actionSaveFileToDisk } from "../actions/actionExport";
 import { Card } from "./Card";
@@ -14,7 +14,6 @@ import { nativeFileSystemSupported } from "../data/filesystem";
 import { trackEvent } from "../analytics";
 import { ActionManager } from "../actions/manager";
 import { getFrame } from "../utils";
-import MenuItem from "./MenuItem";
 
 export type ExportCB = (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -94,6 +93,7 @@ export const JSONExportDialog = ({
   actionManager,
   exportOpts,
   canvas,
+  setAppState,
 }: {
   elements: readonly NonDeletedExcalidrawElement[];
   appState: AppState;
@@ -101,24 +101,15 @@ export const JSONExportDialog = ({
   actionManager: ActionManager;
   exportOpts: ExportOpts;
   canvas: HTMLCanvasElement | null;
+  setAppState: React.Component<any, AppState>["setState"];
 }) => {
-  const [modalIsShown, setModalIsShown] = useState(false);
-
   const handleClose = React.useCallback(() => {
-    setModalIsShown(false);
-  }, []);
+    setAppState({ openDialog: null });
+  }, [setAppState]);
 
   return (
     <>
-      <MenuItem
-        icon={ExportIcon}
-        label={t("buttons.export")}
-        onClick={() => {
-          setModalIsShown(true);
-        }}
-        dataTestId="json-export-button"
-      />
-      {modalIsShown && (
+      {appState.openDialog === "jsonExport" && (
         <Dialog onCloseRequest={handleClose} title={t("buttons.export")}>
           <JSONExportModal
             elements={elements}

src/components/LayerUI.scss

@@ -80,12 +80,6 @@
       }
     }
 
-    .layer-ui__wrapper__footer-center {
-      pointer-events: none;
-      & > * {
-        pointer-events: all;
-      }
-    }
     .layer-ui__wrapper__footer-left,
     .layer-ui__wrapper__footer-right,
     .disable-zen-mode--visible {

src/components/LayerUI.tsx

@@ -8,10 +8,16 @@ import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
 import { calculateScrollCenter } from "../scene";
 import { ExportType } from "../scene/types";
-import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
-import { muteFSAbortError } from "../utils";
+import {
+  AppProps,
+  AppState,
+  ExcalidrawProps,
+  BinaryFiles,
+  UIChildrenComponents,
+  UIWelcomeScreenComponents,
+} from "../types";
+import { isShallowEqual, muteFSAbortError, getReactChildren } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
-import CollabButton from "./CollabButton";
 import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
@@ -35,26 +41,15 @@ import "./LayerUI.scss";
 import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
-import { isMenuOpenAtom, useDevice } from "../components/App";
+import { useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
-import Footer from "./Footer";
-import {
-  ExportImageIcon,
-  HamburgerMenuIcon,
-  WelcomeScreenMenuArrow,
-  WelcomeScreenTopToolbarArrow,
-} from "./icons";
-import { MenuLinks, Separator } from "./MenuUtils";
-import { useOutsideClickHook } from "../hooks/useOutsideClick";
-import WelcomeScreen from "./WelcomeScreen";
+import Footer from "./footer/Footer";
+import WelcomeScreen from "./welcome-screen/WelcomeScreen";
 import { hostSidebarCountersAtom } from "./Sidebar/Sidebar";
 import { jotaiScope } from "../jotai";
 import { useAtom } from "jotai";
-import { LanguageList } from "../excalidraw-app/components/LanguageList";
-import WelcomeScreenDecor from "./WelcomeScreenDecor";
-import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import MenuItem from "./MenuItem";
+import MainMenu from "./main-menu/MainMenu";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -63,7 +58,6 @@ interface LayerUIProps {
   canvas: HTMLCanvasElement | null;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
-  onCollabButtonClick?: () => void;
   onLockToggle: () => void;
   onPenModeToggle: () => void;
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
@@ -71,7 +65,6 @@ interface LayerUIProps {
   langCode: Language["code"];
   isCollaborating: boolean;
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
-  renderCustomFooter?: ExcalidrawProps["renderFooter"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderCustomSidebar?: ExcalidrawProps["renderSidebar"];
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
@@ -81,7 +74,9 @@ interface LayerUIProps {
   id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderWelcomeScreen: boolean;
+  children?: React.ReactNode;
 }
+
 const LayerUI = ({
   actionManager,
   appState,
@@ -89,14 +84,12 @@ const LayerUI = ({
   setAppState,
   elements,
   canvas,
-  onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   onInsertElements,
   showExitZenModeBtn,
   isCollaborating,
   renderTopRightUI,
-  renderCustomFooter,
   renderCustomStats,
   renderCustomSidebar,
   libraryReturnUrl,
@@ -106,9 +99,32 @@ const LayerUI = ({
   id,
   onImageAction,
   renderWelcomeScreen,
+  children,
 }: LayerUIProps) => {
   const device = useDevice();
 
+  const [childrenComponents, restChildren] =
+    getReactChildren<UIChildrenComponents>(children, {
+      Menu: true,
+      FooterCenter: true,
+      WelcomeScreen: true,
+    });
+
+  const [WelcomeScreenComponents] = getReactChildren<UIWelcomeScreenComponents>(
+    renderWelcomeScreen
+      ? (
+          childrenComponents?.WelcomeScreen ?? (
+            <WelcomeScreen>
+              <WelcomeScreen.Center />
+              <WelcomeScreen.Hints.MenuHint />
+              <WelcomeScreen.Hints.ToolbarHint />
+              <WelcomeScreen.Hints.HelpHint />
+            </WelcomeScreen>
+          )
+        )?.props?.children
+      : null,
+  );
+
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
       return null;
@@ -122,6 +138,7 @@ const LayerUI = ({
         actionManager={actionManager}
         exportOpts={UIOptions.canvasActions.export}
         canvas={canvas}
+        setAppState={setAppState}
       />
     );
   };
@@ -175,100 +192,37 @@ const LayerUI = ({
     );
   };
 
-  const [isMenuOpen, setIsMenuOpen] = useAtom(isMenuOpenAtom);
-  const menuRef = useOutsideClickHook(() => setIsMenuOpen(false));
-
+  const renderMenu = () => {
+    return (
+      childrenComponents.Menu || (
+        <MainMenu>
+          <MainMenu.DefaultItems.LoadScene />
+          <MainMenu.DefaultItems.SaveToActiveFile />
+          {/* FIXME we should to test for this inside the item itself */}
+          {UIOptions.canvasActions.export && <MainMenu.DefaultItems.Export />}
+          {/* FIXME we should to test for this inside the item itself */}
+          {UIOptions.canvasActions.saveAsImage && (
+            <MainMenu.DefaultItems.SaveAsImage />
+          )}
+          <MainMenu.DefaultItems.Help />
+          <MainMenu.DefaultItems.ClearCanvas />
+          <MainMenu.Separator />
+          <MainMenu.Group title="Excalidraw links">
+            <MainMenu.DefaultItems.Socials />
+          </MainMenu.Group>
+          <MainMenu.Separator />
+          <MainMenu.DefaultItems.ToggleTheme />
+          <MainMenu.DefaultItems.ChangeCanvasBackground />
+        </MainMenu>
+      )
+    );
+  };
   const renderCanvasActions = () => (
     <div style={{ position: "relative" }}>
-      <WelcomeScreenDecor
-        shouldRender={renderWelcomeScreen && !appState.isLoading}
-      >
-        <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--menu-pointer">
-          {WelcomeScreenMenuArrow}
-          <div>{t("welcomeScreen.menuHints")}</div>
-        </div>
-      </WelcomeScreenDecor>
-
-      <button
-        data-prevent-outside-click
-        className={clsx("menu-button", "zen-mode-transition", {
-          "transition-left": appState.zenModeEnabled,
-        })}
-        onClick={() => setIsMenuOpen(!isMenuOpen)}
-        type="button"
-        data-testid="menu-button"
-      >
-        {HamburgerMenuIcon}
-      </button>
-
-      {isMenuOpen && (
-        <div
-          ref={menuRef}
-          style={{ position: "absolute", top: "100%", marginTop: ".25rem" }}
-        >
-          <Section heading="canvasActions">
-            {/* the zIndex ensures this menu has higher stacking order,
-         see https://github.com/excalidraw/excalidraw/pull/1445 */}
-            <Island
-              className="menu-container"
-              padding={2}
-              style={{ zIndex: 1 }}
-            >
-              {!appState.viewModeEnabled &&
-                actionManager.renderAction("loadScene")}
-              {/* // TODO barnabasmolnar/editor-redesign  */}
-              {/* is this fine here? */}
-              {appState.fileHandle &&
-                actionManager.renderAction("saveToActiveFile")}
-              {renderJSONExportDialog()}
-              {UIOptions.canvasActions.saveAsImage && (
-                <MenuItem
-                  label={t("buttons.exportImage")}
-                  icon={ExportImageIcon}
-                  dataTestId="image-export-button"
-                  onClick={() => setAppState({ openDialog: "imageExport" })}
-                  shortcut={getShortcutFromShortcutName("imageExport")}
-                />
-              )}
-              {onCollabButtonClick && (
-                <CollabButton
-                  isCollaborating={isCollaborating}
-                  collaboratorCount={appState.collaborators.size}
-                  onClick={onCollabButtonClick}
-                />
-              )}
-              {actionManager.renderAction("toggleShortcuts", undefined, true)}
-              {!appState.viewModeEnabled &&
-                actionManager.renderAction("clearCanvas")}
-              <Separator />
-              <MenuLinks />
-              <Separator />
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  rowGap: ".5rem",
-                }}
-              >
-                <div>{actionManager.renderAction("toggleTheme")}</div>
-                <div style={{ padding: "0 0.625rem" }}>
-                  <LanguageList style={{ width: "100%" }} />
-                </div>
-                {!appState.viewModeEnabled && (
-                  <div>
-                    <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-                      {t("labels.canvasBackground")}
-                    </div>
-                    <div style={{ padding: "0 0.625rem" }}>
-                      {actionManager.renderAction("changeViewBackgroundColor")}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </Island>
-          </Section>
-        </div>
-      )}
+      {WelcomeScreenComponents.MenuHint}
+      {/* wrapping to Fragment stops React from occasionally complaining
+                about identical Keys */}
+      <>{renderMenu()}</>
     </div>
   );
 
@@ -305,9 +259,7 @@ const LayerUI = ({
 
     return (
       <FixedSideContainer side="top">
-        {renderWelcomeScreen && !appState.isLoading && (
-          <WelcomeScreen appState={appState} actionManager={actionManager} />
-        )}
+        {WelcomeScreenComponents.Center}
         <div className="App-menu App-menu_top">
           <Stack.Col
             gap={6}
@@ -322,17 +274,7 @@ const LayerUI = ({
             <Section heading="shapes" className="shapes-section">
               {(heading: React.ReactNode) => (
                 <div style={{ position: "relative" }}>
-                  <WelcomeScreenDecor
-                    shouldRender={renderWelcomeScreen && !appState.isLoading}
-                  >
-                    <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--top-toolbar-pointer">
-                      <div className="WelcomeScreen-decor--top-toolbar-pointer__label">
-                        {t("welcomeScreen.toolbarHints")}
-                      </div>
-                      {WelcomeScreenTopToolbarArrow}
-                    </div>
-                  </WelcomeScreenDecor>
-
+                  {WelcomeScreenComponents.ToolbarHint}
                   <Stack.Col gap={4} align="start">
                     <Stack.Row
                       gap={1}
@@ -399,20 +341,8 @@ const LayerUI = ({
               },
             )}
           >
-            <UserList
-              collaborators={appState.collaborators}
-              actionManager={actionManager}
-            />
-            {onCollabButtonClick && (
-              <CollabButton
-                isInHamburgerMenu={false}
-                isCollaborating={isCollaborating}
-                collaboratorCount={appState.collaborators.size}
-                onClick={onCollabButtonClick}
-              />
-            )}
-            {!appState.viewModeEnabled &&
-              renderTopRightUI?.(device.isMobile, appState)}
+            <UserList collaborators={appState.collaborators} />
+            {renderTopRightUI?.(device.isMobile, appState)}
             {!appState.viewModeEnabled && (
               <LibraryButton appState={appState} setAppState={setAppState} />
             )}
@@ -441,6 +371,7 @@ const LayerUI = ({
 
   return (
     <>
+      {restChildren}
       {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
         <ErrorDialog
@@ -456,6 +387,7 @@ const LayerUI = ({
         />
       )}
       {renderImageExportDialog()}
+      {renderJSONExportDialog()}
       {appState.pasteDialog.shown && (
         <PasteChartDialog
           setAppState={setAppState}
@@ -470,24 +402,22 @@ const LayerUI = ({
       )}
       {device.isMobile && (
         <MobileMenu
-          renderWelcomeScreen={renderWelcomeScreen}
           appState={appState}
           elements={elements}
           actionManager={actionManager}
           renderJSONExportDialog={renderJSONExportDialog}
           renderImageExportDialog={renderImageExportDialog}
           setAppState={setAppState}
-          onCollabButtonClick={onCollabButtonClick}
           onLockToggle={() => onLockToggle()}
           onPenModeToggle={onPenModeToggle}
           canvas={canvas}
-          isCollaborating={isCollaborating}
-          renderCustomFooter={renderCustomFooter}
           onImageAction={onImageAction}
           renderTopRightUI={renderTopRightUI}
           renderCustomStats={renderCustomStats}
           renderSidebars={renderSidebars}
           device={device}
+          renderMenu={renderMenu}
+          welcomeScreenCenter={WelcomeScreenComponents.Center}
         />
       )}
 
@@ -512,11 +442,11 @@ const LayerUI = ({
           >
             {renderFixedSideContainer()}
             <Footer
-              renderWelcomeScreen={renderWelcomeScreen}
               appState={appState}
               actionManager={actionManager}
-              renderCustomFooter={renderCustomFooter}
               showExitZenModeBtn={showExitZenModeBtn}
+              footerCenter={childrenComponents.FooterCenter}
+              welcomeScreenHelp={WelcomeScreenComponents.HelpHint}
             />
             {appState.showStats && (
               <Stats
@@ -549,29 +479,39 @@ const LayerUI = ({
   );
 };
 
-const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
-  const getNecessaryObj = (appState: AppState): Partial<AppState> => {
-    const {
-      suggestedBindings,
-      startBoundElement: boundElement,
-      ...ret
-    } = appState;
-    return ret;
-  };
-  const prevAppState = getNecessaryObj(prev.appState);
-  const nextAppState = getNecessaryObj(next.appState);
+const stripIrrelevantAppStateProps = (
+  appState: AppState,
+): Partial<AppState> => {
+  const { suggestedBindings, startBoundElement, cursorButton, ...ret } =
+    appState;
+  return ret;
+};
 
-  const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
+const areEqual = (prevProps: LayerUIProps, nextProps: LayerUIProps) => {
+  // short-circuit early
+  if (prevProps.children !== nextProps.children) {
+    return false;
+  }
+
+  const {
+    canvas: _prevCanvas,
+    // not stable, but shouldn't matter in our case
+    onInsertElements: _prevOnInsertElements,
+    appState: prevAppState,
+    ...prev
+  } = prevProps;
+  const {
+    canvas: _nextCanvas,
+    onInsertElements: _nextOnInsertElements,
+    appState: nextAppState,
+    ...next
+  } = nextProps;
 
   return (
-    prev.renderCustomFooter === next.renderCustomFooter &&
-    prev.renderTopRightUI === next.renderTopRightUI &&
-    prev.renderCustomStats === next.renderCustomStats &&
-    prev.renderCustomSidebar === next.renderCustomSidebar &&
-    prev.langCode === next.langCode &&
-    prev.elements === next.elements &&
-    prev.files === next.files &&
-    keys.every((key) => prevAppState[key] === nextAppState[key])
+    isShallowEqual(
+      stripIrrelevantAppStateProps(prevAppState),
+      stripIrrelevantAppStateProps(nextAppState),
+    ) && isShallowEqual(prev, next)
   );
 };
 

src/components/LibraryMenu.scss

@@ -129,4 +129,27 @@
       padding-right: 0;
     }
   }
+
+  .layer-ui__sidebar__header .dropdown-menu {
+    &.dropdown-menu--mobile {
+      top: 100%;
+    }
+    .dropdown-menu-container {
+      --gap: 0;
+      z-index: 1;
+      position: absolute;
+      top: 100%;
+      left: 0;
+
+      :root[dir="rtl"] & {
+        right: 0;
+        left: auto;
+      }
+
+      width: 196px;
+      box-shadow: var(--library-dropdown-shadow);
+      border-radius: var(--border-radius-lg);
+      padding: 0.25rem 0.5rem;
+    }
+  }
 }

src/components/LibraryMenuHeaderContent.tsx

@@ -13,14 +13,15 @@ import {
 import { ToolButton } from "./ToolButton";
 import { fileOpen } from "../data/filesystem";
 import { muteFSAbortError } from "../utils";
-import { useAtom } from "jotai";
+import { atom, useAtom } from "jotai";
 import { jotaiScope } from "../jotai";
 import ConfirmDialog from "./ConfirmDialog";
 import PublishLibrary from "./PublishLibrary";
 import { Dialog } from "./Dialog";
-import { useOutsideClickHook } from "../hooks/useOutsideClick";
-import MenuItem from "./MenuItem";
-import { isDropdownOpenAtom } from "./App";
+
+import DropdownMenu from "./dropdownMenu/DropdownMenu";
+
+export const isLibraryMenuOpenAtom = atom(false);
 
 const getSelectedItems = (
   libraryItems: LibraryItems,
@@ -45,7 +46,9 @@ export const LibraryMenuHeader: React.FC<{
   appState,
 }) => {
   const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
-
+  const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
+    isLibraryMenuOpenAtom,
+  );
   const renderRemoveLibAlert = useCallback(() => {
     const content = selectedItems.length
       ? t("alerts.removeItemsFromsLibrary", { count: selectedItems.length })
@@ -173,85 +176,86 @@ export const LibraryMenuHeader: React.FC<{
       });
   };
 
-  const [isDropdownOpen, setIsDropdownOpen] = useAtom(isDropdownOpenAtom);
-  const dropdownRef = useOutsideClickHook(() => setIsDropdownOpen(false));
-
+  const renderLibraryMenu = () => {
+    return (
+      <DropdownMenu open={isLibraryMenuOpen}>
+        <DropdownMenu.Trigger
+          className="Sidebar__dropdown-btn"
+          onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
+        >
+          {DotsIcon}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content
+          onClickOutside={() => setIsLibraryMenuOpen(false)}
+          className="library-menu"
+        >
+          {!itemsSelected && (
+            <DropdownMenu.Item
+              onSelect={onLibraryImport}
+              icon={LoadIcon}
+              data-testid="lib-dropdown--load"
+            >
+              {t("buttons.load")}
+            </DropdownMenu.Item>
+          )}
+          {!!items.length && (
+            <DropdownMenu.Item
+              onSelect={onLibraryExport}
+              icon={ExportIcon}
+              data-testid="lib-dropdown--export"
+            >
+              {t("buttons.export")}
+            </DropdownMenu.Item>
+          )}
+          {!!items.length && (
+            <DropdownMenu.Item
+              onSelect={() => setShowRemoveLibAlert(true)}
+              icon={TrashIcon}
+            >
+              {resetLabel}
+            </DropdownMenu.Item>
+          )}
+          {itemsSelected && (
+            <DropdownMenu.Item
+              icon={publishIcon}
+              onSelect={() => setShowPublishLibraryDialog(true)}
+              data-testid="lib-dropdown--remove"
+            >
+              {t("buttons.publishLibrary")}
+            </DropdownMenu.Item>
+          )}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    );
+  };
   return (
     <div style={{ position: "relative" }}>
-      <button
-        type="button"
-        className="Sidebar__dropdown-btn"
-        data-prevent-outside-click
-        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-      >
-        {DotsIcon}
-      </button>
-
+      {renderLibraryMenu()}
       {selectedItems.length > 0 && (
         <div className="library-actions-counter">{selectedItems.length}</div>
       )}
-
-      {isDropdownOpen && (
-        <div
-          className="Sidebar__dropdown-content menu-container"
-          ref={dropdownRef}
-        >
-          {!itemsSelected && (
-            <MenuItem
-              label={t("buttons.load")}
-              icon={LoadIcon}
-              dataTestId="lib-dropdown--load"
-              onClick={onLibraryImport}
-            />
+      {showRemoveLibAlert && renderRemoveLibAlert()}
+      {showPublishLibraryDialog && (
+        <PublishLibrary
+          onClose={() => setShowPublishLibraryDialog(false)}
+          libraryItems={getSelectedItems(
+            libraryItemsData.libraryItems,
+            selectedItems,
           )}
-          {showRemoveLibAlert && renderRemoveLibAlert()}
-          {showPublishLibraryDialog && (
-            <PublishLibrary
-              onClose={() => setShowPublishLibraryDialog(false)}
-              libraryItems={getSelectedItems(
-                libraryItemsData.libraryItems,
-                selectedItems,
-              )}
-              appState={appState}
-              onSuccess={(data) =>
-                onPublishLibSuccess(data, libraryItemsData.libraryItems)
-              }
-              onError={(error) => window.alert(error)}
-              updateItemsInStorage={() =>
-                library.setLibrary(libraryItemsData.libraryItems)
-              }
-              onRemove={(id: string) =>
-                onSelectItems(selectedItems.filter((_id) => _id !== id))
-              }
-            />
-          )}
-          {publishLibSuccess && renderPublishSuccess()}
-          {!!items.length && (
-            <>
-              <MenuItem
-                label={t("buttons.export")}
-                icon={ExportIcon}
-                onClick={onLibraryExport}
-                dataTestId="lib-dropdown--export"
-              />
-              <MenuItem
-                label={resetLabel}
-                icon={TrashIcon}
-                onClick={() => setShowRemoveLibAlert(true)}
-                dataTestId="lib-dropdown--remove"
-              />
-            </>
-          )}
-          {itemsSelected && (
-            <MenuItem
-              label={t("buttons.publishLibrary")}
-              icon={publishIcon}
-              dataTestId="lib-dropdown--publish"
-              onClick={() => setShowPublishLibraryDialog(true)}
-            />
-          )}
-        </div>
+          appState={appState}
+          onSuccess={(data) =>
+            onPublishLibSuccess(data, libraryItemsData.libraryItems)
+          }
+          onError={(error) => window.alert(error)}
+          updateItemsInStorage={() =>
+            library.setLibrary(libraryItemsData.libraryItems)
+          }
+          onRemove={(id: string) =>
+            onSelectItems(selectedItems.filter((_id) => _id !== id))
+          }
+        />
       )}
+      {publishLibSuccess && renderPublishSuccess()}
     </div>
   );
 };

src/components/LibraryUnit.tsx

@@ -44,6 +44,7 @@ export const LibraryUnit = ({
         },
         null,
       );
+      svg.querySelector(".style-fonts")?.remove();
       node.innerHTML = svg.outerHTML;
     })();
 

src/components/Menu.scss

@@ -1,85 +0,0 @@
-@import "../css/variables.module";
-
-.excalidraw {
-  .menu-container {
-    background-color: #fff !important;
-    max-height: calc(100vh - 150px);
-    overflow-y: auto;
-  }
-
-  .menu-button {
-    @include outlineButtonStyles;
-    background-color: var(--island-bg-color);
-    width: var(--lg-button-size);
-    height: var(--lg-button-size);
-
-    svg {
-      width: var(--lg-icon-size);
-      height: var(--lg-icon-size);
-    }
-  }
-
-  .menu-item {
-    display: flex;
-    background-color: transparent;
-    border: 0;
-    align-items: center;
-    padding: 0 0.625rem;
-    height: 2rem;
-    column-gap: 0.625rem;
-    font-size: 0.875rem;
-    color: var(--color-gray-100);
-    cursor: pointer;
-    border-radius: var(--border-radius-md);
-    width: 100%;
-    box-sizing: border-box;
-    font-weight: normal;
-    font-family: inherit;
-
-    @media screen and (min-width: 1921px) {
-      height: 2.25rem;
-    }
-
-    &__text {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    &__shortcut {
-      margin-inline-start: auto;
-      opacity: 0.5;
-    }
-
-    &:hover {
-      background-color: var(--button-hover);
-      text-decoration: none;
-    }
-
-    svg {
-      width: 1rem;
-      height: 1rem;
-      display: block;
-    }
-
-    &.active-collab {
-      background-color: #ecfdf5;
-      color: #064e3c;
-    }
-  }
-
-  &.theme--dark {
-    .menu-item {
-      color: var(--color-gray-40);
-
-      &.active-collab {
-        background-color: #064e3c;
-        color: #ecfdf5;
-      }
-    }
-
-    .menu-container {
-      background-color: var(--color-gray-90) !important;
-    }
-  }
-}

src/components/MenuItem.tsx

@@ -1,37 +0,0 @@
-import clsx from "clsx";
-import "./Menu.scss";
-
-interface MenuProps {
-  icon: JSX.Element;
-  onClick: () => void;
-  label: string;
-  dataTestId: string;
-  shortcut?: string;
-  isCollaborating?: boolean;
-}
-
-const MenuItem = ({
-  icon,
-  onClick,
-  label,
-  dataTestId,
-  shortcut,
-  isCollaborating,
-}: MenuProps) => {
-  return (
-    <button
-      className={clsx("menu-item", { "active-collab": isCollaborating })}
-      aria-label={label}
-      onClick={onClick}
-      data-testid={dataTestId}
-      title={label}
-      type="button"
-    >
-      <div className="menu-item__icon">{icon}</div>
-      <div className="menu-item__text">{label}</div>
-      {shortcut && <div className="menu-item__shortcut">{shortcut}</div>}
-    </button>
-  );
-};
-
-export default MenuItem;

src/components/MenuUtils.tsx

@@ -1,53 +0,0 @@
-import { GithubIcon, DiscordIcon, PlusPromoIcon, TwitterIcon } from "./icons";
-
-export const MenuLinks = () => (
-  <>
-    <a
-      href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
-      target="_blank"
-      rel="noreferrer"
-      className="menu-item"
-      style={{ color: "var(--color-promo)" }}
-    >
-      <div className="menu-item__icon">{PlusPromoIcon}</div>
-      <div className="menu-item__text">Excalidraw+</div>
-    </a>
-    <a
-      className="menu-item"
-      href="https://github.com/excalidraw/excalidraw"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <div className="menu-item__icon">{GithubIcon}</div>
-      <div className="menu-item__text">GitHub</div>
-    </a>
-    <a
-      className="menu-item"
-      target="_blank"
-      href="https://discord.gg/UexuTaE"
-      rel="noopener noreferrer"
-    >
-      <div className="menu-item__icon">{DiscordIcon}</div>
-      <div className="menu-item__text">Discord</div>
-    </a>
-    <a
-      className="menu-item"
-      target="_blank"
-      href="https://twitter.com/excalidraw"
-      rel="noopener noreferrer"
-    >
-      <div className="menu-item__icon">{TwitterIcon}</div>
-      <div className="menu-item__text">Twitter</div>
-    </a>
-  </>
-);
-
-export const Separator = () => (
-  <div
-    style={{
-      height: "1px",
-      backgroundColor: "var(--default-border-color)",
-      margin: ".5rem 0",
-    }}
-  />
-);

src/components/MobileMenu.tsx

@@ -1,5 +1,10 @@
 import React from "react";
-import { AppState, Device, ExcalidrawProps } from "../types";
+import {
+  AppState,
+  Device,
+  ExcalidrawProps,
+  UIWelcomeScreenComponents,
+} from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -11,18 +16,12 @@ import { HintViewer } from "./HintViewer";
 import { calculateScrollCenter } from "../scene";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { Section } from "./Section";
-import CollabButton from "./CollabButton";
 import { SCROLLBAR_WIDTH, SCROLLBAR_MARGIN } from "../scene/scrollbars";
 import { LockButton } from "./LockButton";
-import { UserList } from "./UserList";
 import { LibraryButton } from "./LibraryButton";
 import { PenModeButton } from "./PenModeButton";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
-import { MenuLinks, Separator } from "./MenuUtils";
-import WelcomeScreen from "./WelcomeScreen";
-import MenuItem from "./MenuItem";
-import { ExportImageIcon } from "./icons";
 
 type MobileMenuProps = {
   appState: AppState;
@@ -31,15 +30,10 @@ type MobileMenuProps = {
   renderImageExportDialog: () => React.ReactNode;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
-  onCollabButtonClick?: () => void;
   onLockToggle: () => void;
   onPenModeToggle: () => void;
   canvas: HTMLCanvasElement | null;
-  isCollaborating: boolean;
-  renderCustomFooter?: (
-    isMobile: boolean,
-    appState: AppState,
-  ) => JSX.Element | null;
+
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
     isMobile: boolean,
@@ -48,35 +42,30 @@ type MobileMenuProps = {
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderSidebars: () => JSX.Element | null;
   device: Device;
-  renderWelcomeScreen?: boolean;
+  renderMenu: () => React.ReactNode;
+  welcomeScreenCenter: UIWelcomeScreenComponents["Center"];
 };
 
 export const MobileMenu = ({
   appState,
   elements,
   actionManager,
-  renderJSONExportDialog,
-  renderImageExportDialog,
   setAppState,
-  onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   canvas,
-  isCollaborating,
-  renderCustomFooter,
   onImageAction,
   renderTopRightUI,
   renderCustomStats,
   renderSidebars,
   device,
-  renderWelcomeScreen,
+  renderMenu,
+  welcomeScreenCenter,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
-        {renderWelcomeScreen && !appState.isLoading && (
-          <WelcomeScreen appState={appState} actionManager={actionManager} />
-        )}
+        {welcomeScreenCenter}
         <Section heading="shapes">
           {(heading: React.ReactNode) => (
             <Stack.Col gap={4} align="center">
@@ -84,20 +73,6 @@ export const MobileMenu = ({
                 <Island padding={1} className="App-toolbar App-toolbar--mobile">
                   {heading}
                   <Stack.Row gap={1}>
-                    {/* <PenModeButton
-                      checked={appState.penMode}
-                      onChange={onPenModeToggle}
-                      title={t("toolBar.penMode")}
-                      isMobile
-                      penDetected={appState.penDetected}
-                    />
-                    <LockButton
-                      checked={appState.activeTool.locked}
-                      onChange={onLockToggle}
-                      title={t("toolBar.lock")}
-                      isMobile
-                    />
-                    <div className="App-toolbar__divider"></div> */}
                     <ShapesSwitcher
                       appState={appState}
                       canvas={canvas}
@@ -111,16 +86,14 @@ export const MobileMenu = ({
                     />
                   </Stack.Row>
                 </Island>
+                {renderTopRightUI && renderTopRightUI(true, appState)}
                 <div className="mobile-misc-tools-container">
-                  {!appState.viewModeEnabled &&
-                    renderTopRightUI?.(true, appState)}
                   <PenModeButton
                     checked={appState.penMode}
                     onChange={onPenModeToggle}
                     title={t("toolBar.penMode")}
                     isMobile
                     penDetected={appState.penDetected}
-                    // penDetected={true}
                   />
                   <LockButton
                     checked={appState.activeTool.locked}
@@ -152,16 +125,12 @@ export const MobileMenu = ({
 
   const renderAppToolbar = () => {
     if (appState.viewModeEnabled) {
-      return (
-        <div className="App-toolbar-content">
-          {actionManager.renderAction("toggleCanvasMenu")}
-        </div>
-      );
+      return <div className="App-toolbar-content">{renderMenu()}</div>;
     }
 
     return (
       <div className="App-toolbar-content">
-        {actionManager.renderAction("toggleCanvasMenu")}
+        {renderMenu()}
         {actionManager.renderAction("toggleEditMenu")}
         {actionManager.renderAction("undo")}
         {actionManager.renderAction("redo")}
@@ -173,58 +142,6 @@ export const MobileMenu = ({
     );
   };
 
-  const renderCanvasActions = () => {
-    if (appState.viewModeEnabled) {
-      return (
-        <>
-          {renderJSONExportDialog()}
-          <MenuItem
-            label={t("buttons.exportImage")}
-            icon={ExportImageIcon}
-            dataTestId="image-export-button"
-            onClick={() => setAppState({ openDialog: "imageExport" })}
-          />
-          {renderImageExportDialog()}
-        </>
-      );
-    }
-    return (
-      <>
-        {!appState.viewModeEnabled && actionManager.renderAction("loadScene")}
-        {renderJSONExportDialog()}
-        {renderImageExportDialog()}
-        <MenuItem
-          label={t("buttons.exportImage")}
-          icon={ExportImageIcon}
-          dataTestId="image-export-button"
-          onClick={() => setAppState({ openDialog: "imageExport" })}
-        />
-        {onCollabButtonClick && (
-          <CollabButton
-            isCollaborating={isCollaborating}
-            collaboratorCount={appState.collaborators.size}
-            onClick={onCollabButtonClick}
-          />
-        )}
-        {actionManager.renderAction("toggleShortcuts", undefined, true)}
-        {!appState.viewModeEnabled && actionManager.renderAction("clearCanvas")}
-        <Separator />
-        <MenuLinks />
-        <Separator />
-        {!appState.viewModeEnabled && (
-          <div style={{ marginBottom: ".5rem" }}>
-            <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
-              {t("labels.canvasBackground")}
-            </div>
-            <div style={{ padding: "0 0.625rem" }}>
-              {actionManager.renderAction("changeViewBackgroundColor")}
-            </div>
-          </div>
-        )}
-        {actionManager.renderAction("toggleTheme")}
-      </>
-    );
-  };
   return (
     <>
       {renderSidebars()}
@@ -249,28 +166,9 @@ export const MobileMenu = ({
         }}
       >
         <Island padding={0}>
-          {appState.openMenu === "canvas" ? (
-            <Section className="App-mobile-menu" heading="canvasActions">
-              <div className="panelColumn">
-                <Stack.Col gap={2}>
-                  {renderCanvasActions()}
-                  {renderCustomFooter?.(true, appState)}
-                  {appState.collaborators.size > 0 && (
-                    <fieldset>
-                      <legend>{t("labels.collaborators")}</legend>
-                      <UserList
-                        mobile
-                        collaborators={appState.collaborators}
-                        actionManager={actionManager}
-                      />
-                    </fieldset>
-                  )}
-                </Stack.Col>
-              </div>
-            </Section>
-          ) : appState.openMenu === "shape" &&
-            !appState.viewModeEnabled &&
-            showSelectedShapeActions(appState, elements) ? (
+          {appState.openMenu === "shape" &&
+          !appState.viewModeEnabled &&
+          showSelectedShapeActions(appState, elements) ? (
             <Section className="App-mobile-menu" heading="selectedShapeActions">
               <SelectedShapeActions
                 appState={appState}

src/components/PasteChartDialog.tsx

@@ -46,6 +46,7 @@ const ChartPreviewBtn = (props: {
         },
         null, // files
       );
+      svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();
       previewNode.appendChild(svg);
 

src/components/Sidebar/Sidebar.scss

@@ -3,24 +3,6 @@
 
 .excalidraw {
   .Sidebar {
-    &__dropdown-content {
-      z-index: 1;
-      position: absolute;
-      top: 100%;
-      left: 0;
-
-      :root[dir="rtl"] & {
-        right: 0;
-        left: auto;
-      }
-
-      margin-top: 0.25rem;
-      width: 180px;
-      box-shadow: var(--library-dropdown-shadow);
-      border-radius: var(--border-radius-lg);
-      padding: 0.25rem 0.5rem;
-    }
-
     &__close-btn,
     &__pin-btn,
     &__dropdown-btn {

src/components/UserList.scss

@@ -7,6 +7,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
+    align-items: center;
     gap: 0.625rem;
 
     &:empty {

src/components/UserList.tsx

@@ -4,16 +4,16 @@ import React from "react";
 import clsx from "clsx";
 import { AppState, Collaborator } from "../types";
 import { Tooltip } from "./Tooltip";
-import { ActionManager } from "../actions/manager";
+import { useExcalidrawActionManager } from "./App";
 
 export const UserList: React.FC<{
   className?: string;
   mobile?: boolean;
   collaborators: AppState["collaborators"];
-  actionManager: ActionManager;
-}> = ({ className, mobile, collaborators, actionManager }) => {
-  const uniqueCollaborators = new Map<string, Collaborator>();
+}> = ({ className, mobile, collaborators }) => {
+  const actionManager = useExcalidrawActionManager();
 
+  const uniqueCollaborators = new Map<string, Collaborator>();
   collaborators.forEach((collaborator, socketId) => {
     uniqueCollaborators.set(
       // filter on user id, else fall back on unique socketId
@@ -44,26 +44,6 @@ export const UserList: React.FC<{
         );
       });
 
-  // TODO barnabasmolnar/editor-redesign
-  // probably remove before shipping :)
-  // 20 fake collaborators; for easy, convenient debug purposes ˇˇ
-  // const avatars = Array.from({ length: 20 }).map((_, index) => {
-  //   const avatarJSX = actionManager.renderAction("goToCollaborator", [
-  //     index.toString(),
-  //     {
-  //       username: `User ${index}`,
-  //     },
-  //   ]);
-
-  //   return mobile ? (
-  //     <Tooltip label={`User ${index}`} key={index}>
-  //       {avatarJSX}
-  //     </Tooltip>
-  //   ) : (
-  //     <React.Fragment key={index}>{avatarJSX}</React.Fragment>
-  //   );
-  // });
-
   return (
     <div className={clsx("UserList", className, { UserList_mobile: mobile })}>
       {avatars}

src/components/WelcomeScreen.tsx

@@ -1,141 +0,0 @@
-import { useAtom } from "jotai";
-import { actionLoadScene, actionShortcuts } from "../actions";
-import { ActionManager } from "../actions/manager";
-import { getShortcutFromShortcutName } from "../actions/shortcuts";
-import { COOKIES } from "../constants";
-import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab";
-import { t } from "../i18n";
-import { AppState } from "../types";
-import {
-  ExcalLogo,
-  HelpIcon,
-  LoadIcon,
-  PlusPromoIcon,
-  UsersIcon,
-} from "./icons";
-import "./WelcomeScreen.scss";
-
-const isExcalidrawPlusSignedUser = document.cookie.includes(
-  COOKIES.AUTH_STATE_COOKIE,
-);
-
-const WelcomeScreenItem = ({
-  label,
-  shortcut,
-  onClick,
-  icon,
-  link,
-}: {
-  label: string;
-  shortcut: string | null;
-  onClick?: () => void;
-  icon: JSX.Element;
-  link?: string;
-}) => {
-  if (link) {
-    return (
-      <a
-        className="WelcomeScreen-item"
-        href={link}
-        target="_blank"
-        rel="noreferrer"
-      >
-        <div className="WelcomeScreen-item__label">
-          {icon}
-          {label}
-        </div>
-      </a>
-    );
-  }
-
-  return (
-    <button className="WelcomeScreen-item" type="button" onClick={onClick}>
-      <div className="WelcomeScreen-item__label">
-        {icon}
-        {label}
-      </div>
-      {shortcut && (
-        <div className="WelcomeScreen-item__shortcut">{shortcut}</div>
-      )}
-    </button>
-  );
-};
-
-const WelcomeScreen = ({
-  appState,
-  actionManager,
-}: {
-  appState: AppState;
-  actionManager: ActionManager;
-}) => {
-  const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
-
-  let subheadingJSX;
-
-  if (isExcalidrawPlusSignedUser) {
-    subheadingJSX = t("welcomeScreen.switchToPlusApp")
-      .split(/(Excalidraw\+)/)
-      .map((bit, idx) => {
-        if (bit === "Excalidraw+") {
-          return (
-            <a
-              style={{ pointerEvents: "all" }}
-              href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
-              key={idx}
-            >
-              Excalidraw+
-            </a>
-          );
-        }
-        return bit;
-      });
-  } else {
-    subheadingJSX = t("welcomeScreen.data");
-  }
-
-  return (
-    <div className="WelcomeScreen-container">
-      <div className="WelcomeScreen-logo virgil WelcomeScreen-decor">
-        {ExcalLogo} Excalidraw
-      </div>
-      <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--subheading">
-        {subheadingJSX}
-      </div>
-      <div className="WelcomeScreen-items">
-        {!appState.viewModeEnabled && (
-          <WelcomeScreenItem
-            // TODO barnabasmolnar/editor-redesign
-            // do we want the internationalized labels here that are currently
-            // in use elsewhere or new ones?
-            label={t("buttons.load")}
-            onClick={() => actionManager.executeAction(actionLoadScene)}
-            shortcut={getShortcutFromShortcutName("loadScene")}
-            icon={LoadIcon}
-          />
-        )}
-        <WelcomeScreenItem
-          label={t("labels.liveCollaboration")}
-          shortcut={null}
-          onClick={() => setCollabDialogShown(true)}
-          icon={UsersIcon}
-        />
-        <WelcomeScreenItem
-          onClick={() => actionManager.executeAction(actionShortcuts)}
-          label={t("helpDialog.title")}
-          shortcut="?"
-          icon={HelpIcon}
-        />
-        {!isExcalidrawPlusSignedUser && (
-          <WelcomeScreenItem
-            link="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
-            label="Try Excalidraw Plus!"
-            shortcut={null}
-            icon={PlusPromoIcon}
-          />
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default WelcomeScreen;

src/components/WelcomeScreenDecor.tsx

@@ -1,11 +0,0 @@
-import { ReactNode } from "react";
-
-const WelcomeScreenDecor = ({
-  children,
-  shouldRender,
-}: {
-  children: ReactNode;
-  shouldRender: boolean;
-}) => (shouldRender ? <>{children}</> : null);
-
-export default WelcomeScreenDecor;

src/components/dropdownMenu/DropdownMenu.scss

@@ -0,0 +1,127 @@
+@import "../../css/variables.module";
+
+.excalidraw {
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    margin-top: 0.25rem;
+
+    &--mobile {
+      bottom: 55px;
+      top: auto;
+      left: 0;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      row-gap: 0.75rem;
+
+      .dropdown-menu-container {
+        padding: 8px 8px;
+        box-sizing: border-box;
+        background-color: var(--island-bg-color);
+        box-shadow: var(--shadow-island);
+        border-radius: var(--border-radius-lg);
+        position: relative;
+        transition: box-shadow 0.5s ease-in-out;
+
+        &.zen-mode {
+          box-shadow: none;
+        }
+      }
+    }
+
+    .dropdown-menu-container {
+      background-color: #fff !important;
+      max-height: calc(100vh - 150px);
+      overflow-y: auto;
+      --gap: 2;
+    }
+
+    .dropdown-menu-item-base {
+      display: flex;
+      padding: 0 0.625rem;
+      column-gap: 0.625rem;
+      font-size: 0.875rem;
+      color: var(--color-gray-100);
+      width: 100%;
+      box-sizing: border-box;
+      font-weight: normal;
+      font-family: inherit;
+    }
+
+    .dropdown-menu-item {
+      background-color: transparent;
+      border: 0;
+      align-items: center;
+      height: 2rem;
+      cursor: pointer;
+      border-radius: var(--border-radius-md);
+
+      @media screen and (min-width: 1921px) {
+        height: 2.25rem;
+      }
+
+      &__text {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      &__shortcut {
+        margin-inline-start: auto;
+        opacity: 0.5;
+      }
+
+      &:hover {
+        background-color: var(--button-hover-bg);
+        text-decoration: none;
+      }
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+        display: block;
+      }
+    }
+
+    .dropdown-menu-item-custom {
+      margin-top: 0.5rem;
+    }
+
+    .dropdown-menu-group-title {
+      font-size: 14px;
+      text-align: left;
+      margin: 10px 0;
+      font-weight: 500;
+    }
+  }
+  &.theme--dark {
+    .dropdown-menu-item {
+      color: var(--color-gray-40);
+    }
+
+    .dropdown-menu-container {
+      background-color: var(--color-gray-90) !important;
+    }
+  }
+
+  .dropdown-menu-button {
+    @include outlineButtonStyles;
+    background-color: var(--island-bg-color);
+    width: var(--lg-button-size);
+    height: var(--lg-button-size);
+
+    svg {
+      width: var(--lg-icon-size);
+      height: var(--lg-icon-size);
+    }
+
+    &--mobile {
+      border: none;
+      margin: 0;
+      padding: 0;
+      width: var(--default-button-size);
+      height: var(--default-button-size);
+    }
+  }
+}

src/components/dropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import DropdownMenuTrigger from "./DropdownMenuTrigger";
+import DropdownMenuItem from "./DropdownMenuItem";
+import MenuSeparator from "./DropdownMenuSeparator";
+import DropdownMenuGroup from "./DropdownMenuGroup";
+import DropdownMenuContent from "./DropdownMenuContent";
+import DropdownMenuItemLink from "./DropdownMenuItemLink";
+import DropdownMenuItemCustom from "./DropdownMenuItemCustom";
+import {
+  getMenuContentComponent,
+  getMenuTriggerComponent,
+} from "./dropdownMenuUtils";
+
+import "./DropdownMenu.scss";
+
+const DropdownMenu = ({
+  children,
+  open,
+}: {
+  children?: React.ReactNode;
+  open: boolean;
+}) => {
+  const MenuTriggerComp = getMenuTriggerComponent(children);
+  const MenuContentComp = getMenuContentComponent(children);
+  return (
+    <>
+      {MenuTriggerComp}
+      {open && MenuContentComp}
+    </>
+  );
+};
+
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.ItemLink = DropdownMenuItemLink;
+DropdownMenu.ItemCustom = DropdownMenuItemCustom;
+DropdownMenu.Group = DropdownMenuGroup;
+DropdownMenu.Separator = MenuSeparator;
+
+export default DropdownMenu;
+
+DropdownMenu.displayName = "DropdownMenu";

src/components/dropdownMenu/DropdownMenuContent.tsx

@@ -0,0 +1,51 @@
+import { useOutsideClickHook } from "../../hooks/useOutsideClick";
+import { Island } from "../Island";
+
+import { useDevice } from "../App";
+import clsx from "clsx";
+import Stack from "../Stack";
+
+const MenuContent = ({
+  children,
+  onClickOutside,
+  className = "",
+  style,
+}: {
+  children?: React.ReactNode;
+  onClickOutside?: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+}) => {
+  const device = useDevice();
+  const menuRef = useOutsideClickHook(() => {
+    onClickOutside?.();
+  });
+
+  const classNames = clsx(`dropdown-menu ${className}`, {
+    "dropdown-menu--mobile": device.isMobile,
+  }).trim();
+  return (
+    <div
+      ref={menuRef}
+      className={classNames}
+      style={style}
+      data-testid="dropdown-menu"
+    >
+      {/* the zIndex ensures this menu has higher stacking order,
+    see https://github.com/excalidraw/excalidraw/pull/1445 */}
+      {device.isMobile ? (
+        <Stack.Col className="dropdown-menu-container">{children}</Stack.Col>
+      ) : (
+        <Island
+          className="dropdown-menu-container"
+          padding={2}
+          style={{ zIndex: 1 }}
+        >
+          {children}
+        </Island>
+      )}
+    </div>
+  );
+};
+export default MenuContent;
+MenuContent.displayName = "DropdownMenuContent";

src/components/dropdownMenu/DropdownMenuGroup.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const MenuGroup = ({
+  children,
+  className = "",
+  style,
+  title,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  title?: string;
+}) => {
+  return (
+    <div className={`dropdown-menu-group ${className}`} style={style}>
+      {title && <p className="dropdown-menu-group-title">{title}</p>}
+      {children}
+    </div>
+  );
+};
+
+export default MenuGroup;
+MenuGroup.displayName = "DropdownMenuGroup";

src/components/dropdownMenu/DropdownMenuItem.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import MenuItemContent from "./DropdownMenuItemContent";
+
+export const getDrodownMenuItemClassName = (className = "") => {
+  return `dropdown-menu-item dropdown-menu-item-base ${className}`.trim();
+};
+
+const DropdownMenuItem = ({
+  icon,
+  onSelect,
+  children,
+  shortcut,
+  className,
+  ...rest
+}: {
+  icon?: JSX.Element;
+  onSelect: () => void;
+  children: React.ReactNode;
+  shortcut?: string;
+  className?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button
+      {...rest}
+      onClick={onSelect}
+      type="button"
+      className={getDrodownMenuItemClassName(className)}
+      title={rest.title ?? rest["aria-label"]}
+    >
+      <MenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </MenuItemContent>
+    </button>
+  );
+};
+
+export default DropdownMenuItem;
+DropdownMenuItem.displayName = "DropdownMenuItem";

src/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -0,0 +1,23 @@
+import { useDevice } from "../App";
+
+const MenuItemContent = ({
+  icon,
+  shortcut,
+  children,
+}: {
+  icon?: JSX.Element;
+  shortcut?: string;
+  children: React.ReactNode;
+}) => {
+  const device = useDevice();
+  return (
+    <>
+      <div className="dropdown-menu-item__icon">{icon}</div>
+      <div className="dropdown-menu-item__text">{children}</div>
+      {shortcut && !device.isMobile && (
+        <div className="dropdown-menu-item__shortcut">{shortcut}</div>
+      )}
+    </>
+  );
+};
+export default MenuItemContent;

src/components/dropdownMenu/DropdownMenuItemCustom.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const DropdownMenuItemCustom = ({
+  children,
+  className = "",
+  ...rest
+}: {
+  children: React.ReactNode;
+  className?: string;
+} & React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      {...rest}
+      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default DropdownMenuItemCustom;

src/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -0,0 +1,35 @@
+import MenuItemContent from "./DropdownMenuItemContent";
+import React from "react";
+import { getDrodownMenuItemClassName } from "./DropdownMenuItem";
+const DropdownMenuItemLink = ({
+  icon,
+  shortcut,
+  href,
+  children,
+  className = "",
+  ...rest
+}: {
+  icon?: JSX.Element;
+  children: React.ReactNode;
+  shortcut?: string;
+  className?: string;
+  href: string;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  return (
+    <a
+      {...rest}
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      className={getDrodownMenuItemClassName(className)}
+      title={rest.title ?? rest["aria-label"]}
+    >
+      <MenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </MenuItemContent>
+    </a>
+  );
+};
+
+export default DropdownMenuItemLink;
+DropdownMenuItemLink.displayName = "DropdownMenuItemLink";

src/components/dropdownMenu/DropdownMenuSeparator.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const MenuSeparator = () => (
+  <div
+    style={{
+      height: "1px",
+      backgroundColor: "var(--default-border-color)",
+      margin: ".5rem 0",
+    }}
+  />
+);
+
+export default MenuSeparator;
+MenuSeparator.displayName = "DropdownMenuSeparator";

src/components/dropdownMenu/DropdownMenuTrigger.tsx

@@ -0,0 +1,37 @@
+import clsx from "clsx";
+import { useDevice, useExcalidrawAppState } from "../App";
+
+const MenuTrigger = ({
+  className = "",
+  children,
+  onToggle,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  onToggle: () => void;
+}) => {
+  const appState = useExcalidrawAppState();
+  const device = useDevice();
+  const classNames = clsx(
+    `dropdown-menu-button ${className}`,
+    "zen-mode-transition",
+    {
+      "transition-left": appState.zenModeEnabled,
+      "dropdown-menu-button--mobile": device.isMobile,
+    },
+  ).trim();
+  return (
+    <button
+      data-prevent-outside-click
+      className={classNames}
+      onClick={onToggle}
+      type="button"
+      data-testid="dropdown-menu-button"
+    >
+      {children}
+    </button>
+  );
+};
+
+export default MenuTrigger;
+MenuTrigger.displayName = "DropdownMenuTrigger";

src/components/dropdownMenu/dropdownMenuUtils.ts

@@ -0,0 +1,35 @@
+import React from "react";
+
+export const getMenuTriggerComponent = (children: React.ReactNode) => {
+  const comp = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      typeof child.type !== "string" &&
+      //@ts-ignore
+      child?.type.displayName &&
+      //@ts-ignore
+      child.type.displayName === "DropdownMenuTrigger",
+  );
+  if (!comp) {
+    return null;
+  }
+  //@ts-ignore
+  return comp;
+};
+
+export const getMenuContentComponent = (children: React.ReactNode) => {
+  const comp = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      typeof child.type !== "string" &&
+      //@ts-ignore
+      child?.type.displayName &&
+      //@ts-ignore
+      child.type.displayName === "DropdownMenuContent",
+  );
+  if (!comp) {
+    return null;
+  }
+  //@ts-ignore
+  return comp;
+};

src/components/footer/Footer.tsx

@@ -1,35 +1,39 @@
 import clsx from "clsx";
-import { ActionManager } from "../actions/manager";
-import { t } from "../i18n";
-import { AppState, ExcalidrawProps } from "../types";
+import { actionShortcuts } from "../../actions";
+import { ActionManager } from "../../actions/manager";
+import {
+  AppState,
+  UIChildrenComponents,
+  UIWelcomeScreenComponents,
+} from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
   UndoRedoActions,
   ZoomActions,
-} from "./Actions";
-import { useDevice } from "./App";
-import { WelcomeScreenHelpArrow } from "./icons";
-import { Section } from "./Section";
-import Stack from "./Stack";
-import WelcomeScreenDecor from "./WelcomeScreenDecor";
+} from "../Actions";
+import { useDevice } from "../App";
+import { HelpButton } from "../HelpButton";
+import { Section } from "../Section";
+import Stack from "../Stack";
 
 const Footer = ({
   appState,
   actionManager,
-  renderCustomFooter,
   showExitZenModeBtn,
-  renderWelcomeScreen,
+  footerCenter,
+  welcomeScreenHelp,
 }: {
   appState: AppState;
   actionManager: ActionManager;
-  renderCustomFooter?: ExcalidrawProps["renderFooter"];
   showExitZenModeBtn: boolean;
-  renderWelcomeScreen: boolean;
+  footerCenter: UIChildrenComponents["FooterCenter"];
+  welcomeScreenHelp: UIWelcomeScreenComponents["HelpHint"];
 }) => {
   const device = useDevice();
   const showFinalize =
     !appState.viewModeEnabled && appState.multiElement && device.isTouchScreen;
+
   return (
     <footer
       role="contentinfo"
@@ -69,33 +73,17 @@ const Footer = ({
           </Section>
         </Stack.Col>
       </div>
-      <div
-        className={clsx(
-          "layer-ui__wrapper__footer-center zen-mode-transition",
-          {
-            "layer-ui__wrapper__footer-left--transition-bottom":
-              appState.zenModeEnabled,
-          },
-        )}
-      >
-        {renderCustomFooter?.(false, appState)}
-      </div>
+      {footerCenter}
       <div
         className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
           "transition-right disable-pointerEvents": appState.zenModeEnabled,
         })}
       >
         <div style={{ position: "relative" }}>
-          <WelcomeScreenDecor
-            shouldRender={renderWelcomeScreen && !appState.isLoading}
-          >
-            <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--help-pointer">
-              <div>{t("welcomeScreen.helpHints")}</div>
-              {WelcomeScreenHelpArrow}
-            </div>
-          </WelcomeScreenDecor>
-
-          {actionManager.renderAction("toggleShortcuts")}
+          {welcomeScreenHelp}
+          <HelpButton
+            onClick={() => actionManager.executeAction(actionShortcuts)}
+          />
         </div>
       </div>
       <ExitZenModeAction
@@ -107,3 +95,4 @@ const Footer = ({
 };
 
 export default Footer;
+Footer.displayName = "Footer";

src/components/footer/FooterCenter.scss

@@ -0,0 +1,10 @@
+.footer-center {
+  pointer-events: none;
+  & > * {
+    pointer-events: all;
+  }
+
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}

src/components/footer/FooterCenter.tsx

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import { useExcalidrawAppState } from "../App";
+import "./FooterCenter.scss";
+
+const FooterCenter = ({ children }: { children?: React.ReactNode }) => {
+  const appState = useExcalidrawAppState();
+  return (
+    <div
+      className={clsx("footer-center zen-mode-transition", {
+        "layer-ui__wrapper__footer-left--transition-bottom":
+          appState.zenModeEnabled,
+      })}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default FooterCenter;
+FooterCenter.displayName = "FooterCenter";

src/components/icons.tsx

@@ -883,7 +883,7 @@ export const CenterHorizontallyIcon = createIcon(
   modifiedTablerIconProps,
 );
 
-export const UsersIcon = createIcon(
+export const usersIcon = createIcon(
   <g strokeWidth="1.5">
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <circle cx="9" cy="7" r="4"></circle>

src/components/live-collaboration/LiveCollaborationTrigger.scss

@@ -1,30 +1,23 @@
-@import "../css/variables.module";
+@import "../../css/variables.module";
 
 .excalidraw {
   .collab-button {
-    @include outlineButtonStyles;
-    width: var(--lg-button-size);
-    height: var(--lg-button-size);
+    --button-bg: var(--color-primary);
+    --button-color: white;
+    --button-border: var(--color-primary);
+
+    --button-width: var(--lg-button-size);
+    --button-height: var(--lg-button-size);
+
+    --button-hover-bg: var(--color-primary-darker);
+    --button-hover-border: var(--color-primary-darker);
+
+    --button-active-bg: var(--color-primary-darker);
 
-    svg {
-      width: var(--lg-icon-size);
-      height: var(--lg-icon-size);
-    }
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-    color: white;
     flex-shrink: 0;
 
-    &:hover {
-      background-color: var(--color-primary-darker);
-      border-color: var(--color-primary-darker);
-    }
-
-    &:active {
-      background-color: var(--color-primary-darker);
-    }
-
-    &.active {
+    // double .active to force specificity
+    &.active.active {
       background-color: #0fb884;
       border-color: #0fb884;
 

src/components/live-collaboration/LiveCollaborationTrigger.tsx

@@ -0,0 +1,40 @@
+import { t } from "../../i18n";
+import { usersIcon } from "../icons";
+import { Button } from "../Button";
+
+import clsx from "clsx";
+import { useExcalidrawAppState } from "../App";
+
+import "./LiveCollaborationTrigger.scss";
+
+const LiveCollaborationTrigger = ({
+  isCollaborating,
+  onSelect,
+  ...rest
+}: {
+  isCollaborating: boolean;
+  onSelect: () => void;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  const appState = useExcalidrawAppState();
+
+  return (
+    <Button
+      {...rest}
+      className={clsx("collab-button", { active: isCollaborating })}
+      type="button"
+      onSelect={onSelect}
+      style={{ position: "relative" }}
+      title={t("labels.liveCollaboration")}
+    >
+      {usersIcon}
+      {appState.collaborators.size > 0 && (
+        <div className="CollabButton-collaborators">
+          {appState.collaborators.size}
+        </div>
+      )}
+    </Button>
+  );
+};
+
+export default LiveCollaborationTrigger;
+LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";

src/components/main-menu/DefaultItems.tsx

@@ -0,0 +1,285 @@
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
+import { t } from "../../i18n";
+import {
+  useExcalidrawAppState,
+  useExcalidrawSetAppState,
+  useExcalidrawActionManager,
+} from "../App";
+import {
+  ExportIcon,
+  ExportImageIcon,
+  HelpIcon,
+  LoadIcon,
+  MoonIcon,
+  save,
+  SunIcon,
+  TrashIcon,
+  usersIcon,
+} from "../icons";
+import { GithubIcon, DiscordIcon, TwitterIcon } from "../icons";
+import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
+import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
+import {
+  actionClearCanvas,
+  actionLoadScene,
+  actionSaveToActiveFile,
+  actionShortcuts,
+  actionToggleTheme,
+} from "../../actions";
+
+import "./DefaultItems.scss";
+import { useState } from "react";
+import ConfirmDialog from "../ConfirmDialog";
+import clsx from "clsx";
+
+export const LoadScene = () => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (!actionManager.isActionEnabled(actionLoadScene)) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuItem
+      icon={LoadIcon}
+      onSelect={() => actionManager.executeAction(actionLoadScene)}
+      data-testid="load-button"
+      shortcut={getShortcutFromShortcutName("loadScene")}
+      aria-label={t("buttons.load")}
+    >
+      {t("buttons.load")}
+    </DropdownMenuItem>
+  );
+};
+LoadScene.displayName = "LoadScene";
+
+export const SaveToActiveFile = () => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (!actionManager.isActionEnabled(actionSaveToActiveFile)) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuItem
+      shortcut={getShortcutFromShortcutName("saveScene")}
+      data-testid="save-button"
+      onSelect={() => actionManager.executeAction(actionSaveToActiveFile)}
+      icon={save}
+      aria-label={`${t("buttons.save")}`}
+    >{`${t("buttons.save")}`}</DropdownMenuItem>
+  );
+};
+SaveToActiveFile.displayName = "SaveToActiveFile";
+
+export const SaveAsImage = () => {
+  const setAppState = useExcalidrawSetAppState();
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  return (
+    <DropdownMenuItem
+      icon={ExportImageIcon}
+      data-testid="image-export-button"
+      onSelect={() => setAppState({ openDialog: "imageExport" })}
+      shortcut={getShortcutFromShortcutName("imageExport")}
+      aria-label={t("buttons.exportImage")}
+    >
+      {t("buttons.exportImage")}
+    </DropdownMenuItem>
+  );
+};
+SaveAsImage.displayName = "SaveAsImage";
+
+export const Help = () => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+
+  const actionManager = useExcalidrawActionManager();
+
+  return (
+    <DropdownMenuItem
+      data-testid="help-menu-item"
+      icon={HelpIcon}
+      onSelect={() => actionManager.executeAction(actionShortcuts)}
+      shortcut="?"
+      aria-label={t("helpDialog.title")}
+    >
+      {t("helpDialog.title")}
+    </DropdownMenuItem>
+  );
+};
+Help.displayName = "Help";
+
+export const ClearCanvas = () => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  const [showDialog, setShowDialog] = useState(false);
+  const toggleDialog = () => setShowDialog(!showDialog);
+
+  if (!actionManager.isActionEnabled(actionClearCanvas)) {
+    return null;
+  }
+
+  return (
+    <>
+      <DropdownMenuItem
+        icon={TrashIcon}
+        onSelect={toggleDialog}
+        data-testid="clear-canvas-button"
+        aria-label={t("buttons.clearReset")}
+      >
+        {t("buttons.clearReset")}
+      </DropdownMenuItem>
+
+      {/* FIXME this should live outside MainMenu so it stays open
+          if menu is closed */}
+      {showDialog && (
+        <ConfirmDialog
+          onConfirm={() => {
+            actionManager.executeAction(actionClearCanvas);
+            toggleDialog();
+          }}
+          onCancel={toggleDialog}
+          title={t("clearCanvasDialog.title")}
+        >
+          <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
+        </ConfirmDialog>
+      )}
+    </>
+  );
+};
+ClearCanvas.displayName = "ClearCanvas";
+
+export const ToggleTheme = () => {
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (!actionManager.isActionEnabled(actionToggleTheme)) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuItem
+      onSelect={() => {
+        return actionManager.executeAction(actionToggleTheme);
+      }}
+      icon={appState.theme === "dark" ? SunIcon : MoonIcon}
+      data-testid="toggle-dark-mode"
+      shortcut={getShortcutFromShortcutName("toggleTheme")}
+      aria-label={
+        appState.theme === "dark"
+          ? t("buttons.lightMode")
+          : t("buttons.darkMode")
+      }
+    >
+      {appState.theme === "dark"
+        ? t("buttons.lightMode")
+        : t("buttons.darkMode")}
+    </DropdownMenuItem>
+  );
+};
+ToggleTheme.displayName = "ToggleTheme";
+
+export const ChangeCanvasBackground = () => {
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (appState.viewModeEnabled) {
+    return null;
+  }
+  return (
+    <div style={{ marginTop: "0.5rem" }}>
+      <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+        {t("labels.canvasBackground")}
+      </div>
+      <div style={{ padding: "0 0.625rem" }}>
+        {actionManager.renderAction("changeViewBackgroundColor")}
+      </div>
+    </div>
+  );
+};
+ChangeCanvasBackground.displayName = "ChangeCanvasBackground";
+
+export const Export = () => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  const setAppState = useExcalidrawSetAppState();
+  return (
+    <DropdownMenuItem
+      icon={ExportIcon}
+      onSelect={() => {
+        setAppState({ openDialog: "jsonExport" });
+      }}
+      data-testid="json-export-button"
+      aria-label={t("buttons.export")}
+    >
+      {t("buttons.export")}
+    </DropdownMenuItem>
+  );
+};
+Export.displayName = "Export";
+
+export const Socials = () => (
+  <>
+    <DropdownMenuItemLink
+      icon={GithubIcon}
+      href="https://github.com/excalidraw/excalidraw"
+      aria-label="GitHub"
+    >
+      GitHub
+    </DropdownMenuItemLink>
+    <DropdownMenuItemLink
+      icon={DiscordIcon}
+      href="https://discord.gg/UexuTaE"
+      aria-label="Discord"
+    >
+      Discord
+    </DropdownMenuItemLink>
+    <DropdownMenuItemLink
+      icon={TwitterIcon}
+      href="https://twitter.com/excalidraw"
+      aria-label="Twitter"
+    >
+      Twitter
+    </DropdownMenuItemLink>
+  </>
+);
+Socials.displayName = "Socials";
+
+export const LiveCollaborationTrigger = ({
+  onSelect,
+  isCollaborating,
+}: {
+  onSelect: () => void;
+  isCollaborating: boolean;
+}) => {
+  // FIXME Hack until we tie "t" to lang state
+  // eslint-disable-next-line
+  const appState = useExcalidrawAppState();
+  return (
+    <DropdownMenuItem
+      data-testid="collab-button"
+      icon={usersIcon}
+      className={clsx({
+        "active-collab": isCollaborating,
+      })}
+      onSelect={onSelect}
+    >
+      {t("labels.liveCollaboration")}
+    </DropdownMenuItem>
+  );
+};
+
+LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";

src/components/main-menu/MainMenu.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+  useDevice,
+  useExcalidrawAppState,
+  useExcalidrawSetAppState,
+} from "../App";
+import DropdownMenu from "../dropdownMenu/DropdownMenu";
+
+import * as DefaultItems from "./DefaultItems";
+
+import { UserList } from "../UserList";
+import { t } from "../../i18n";
+import { HamburgerMenuIcon } from "../icons";
+
+const MainMenu = ({ children }: { children?: React.ReactNode }) => {
+  const device = useDevice();
+  const appState = useExcalidrawAppState();
+  const setAppState = useExcalidrawSetAppState();
+  const onClickOutside = device.isMobile
+    ? undefined
+    : () => setAppState({ openMenu: null });
+  return (
+    <DropdownMenu open={appState.openMenu === "canvas"}>
+      <DropdownMenu.Trigger
+        onToggle={() => {
+          setAppState({
+            openMenu: appState.openMenu === "canvas" ? null : "canvas",
+          });
+        }}
+      >
+        {HamburgerMenuIcon}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content onClickOutside={onClickOutside}>
+        {children}
+        {device.isMobile && appState.collaborators.size > 0 && (
+          <fieldset className="UserList-Wrapper">
+            <legend>{t("labels.collaborators")}</legend>
+            <UserList mobile={true} collaborators={appState.collaborators} />
+          </fieldset>
+        )}
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  );
+};
+
+MainMenu.Trigger = DropdownMenu.Trigger;
+MainMenu.Item = DropdownMenu.Item;
+MainMenu.ItemLink = DropdownMenu.ItemLink;
+MainMenu.ItemCustom = DropdownMenu.ItemCustom;
+MainMenu.Group = DropdownMenu.Group;
+MainMenu.Separator = DropdownMenu.Separator;
+MainMenu.DefaultItems = DefaultItems;
+
+export default MainMenu;
+
+MainMenu.displayName = "Menu";

src/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -0,0 +1,195 @@
+import { actionLoadScene, actionShortcuts } from "../../actions";
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
+import { t } from "../../i18n";
+import {
+  useDevice,
+  useExcalidrawActionManager,
+  useExcalidrawAppState,
+} from "../App";
+import { ExcalLogo, HelpIcon, LoadIcon, usersIcon } from "../icons";
+
+const WelcomeScreenMenuItemContent = ({
+  icon,
+  shortcut,
+  children,
+}: {
+  icon?: JSX.Element;
+  shortcut?: string | null;
+  children: React.ReactNode;
+}) => {
+  const device = useDevice();
+  return (
+    <>
+      <div className="welcome-screen-menu-item__icon">{icon}</div>
+      <div className="welcome-screen-menu-item__text">{children}</div>
+      {shortcut && !device.isMobile && (
+        <div className="welcome-screen-menu-item__shortcut">{shortcut}</div>
+      )}
+    </>
+  );
+};
+WelcomeScreenMenuItemContent.displayName = "WelcomeScreenMenuItemContent";
+
+const WelcomeScreenMenuItem = ({
+  onSelect,
+  children,
+  icon,
+  shortcut,
+  className = "",
+  ...props
+}: {
+  onSelect: () => void;
+  children: React.ReactNode;
+  icon?: JSX.Element;
+  shortcut?: string | null;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button
+      {...props}
+      type="button"
+      className={`welcome-screen-menu-item ${className}`}
+      onClick={onSelect}
+    >
+      <WelcomeScreenMenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </WelcomeScreenMenuItemContent>
+    </button>
+  );
+};
+WelcomeScreenMenuItem.displayName = "WelcomeScreenMenuItem";
+
+const WelcomeScreenMenuItemLink = ({
+  children,
+  href,
+  icon,
+  shortcut,
+  className = "",
+  ...props
+}: {
+  children: React.ReactNode;
+  href: string;
+  icon?: JSX.Element;
+  shortcut?: string | null;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  return (
+    <a
+      {...props}
+      className={`welcome-screen-menu-item ${className}`}
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <WelcomeScreenMenuItemContent icon={icon} shortcut={shortcut}>
+        {children}
+      </WelcomeScreenMenuItemContent>
+    </a>
+  );
+};
+WelcomeScreenMenuItemLink.displayName = "WelcomeScreenMenuItemLink";
+
+const Center = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div className="welcome-screen-center">
+      {children || (
+        <>
+          <Logo />
+          <Heading>{t("welcomeScreen.defaults.center_heading")}</Heading>
+          <Menu>
+            <MenuItemLoadScene />
+            <MenuItemHelp />
+          </Menu>
+        </>
+      )}
+    </div>
+  );
+};
+Center.displayName = "Center";
+
+const Logo = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div className="welcome-screen-center__logo virgil welcome-screen-decor">
+      {children || <>{ExcalLogo} Excalidraw</>}
+    </div>
+  );
+};
+Logo.displayName = "Logo";
+
+const Heading = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="welcome-screen-center__heading welcome-screen-decor virgil">
+      {children}
+    </div>
+  );
+};
+Heading.displayName = "Heading";
+
+const Menu = ({ children }: { children?: React.ReactNode }) => {
+  return <div className="welcome-screen-menu">{children}</div>;
+};
+Menu.displayName = "Menu";
+
+const MenuItemHelp = () => {
+  const actionManager = useExcalidrawActionManager();
+
+  return (
+    <WelcomeScreenMenuItem
+      onSelect={() => actionManager.executeAction(actionShortcuts)}
+      shortcut="?"
+      icon={HelpIcon}
+    >
+      {t("helpDialog.title")}
+    </WelcomeScreenMenuItem>
+  );
+};
+MenuItemHelp.displayName = "MenuItemHelp";
+
+const MenuItemLoadScene = () => {
+  const appState = useExcalidrawAppState();
+  const actionManager = useExcalidrawActionManager();
+
+  if (appState.viewModeEnabled) {
+    return null;
+  }
+
+  return (
+    <WelcomeScreenMenuItem
+      onSelect={() => actionManager.executeAction(actionLoadScene)}
+      shortcut={getShortcutFromShortcutName("loadScene")}
+      icon={LoadIcon}
+    >
+      {t("buttons.load")}
+    </WelcomeScreenMenuItem>
+  );
+};
+MenuItemLoadScene.displayName = "MenuItemLoadScene";
+
+const MenuItemLiveCollaborationTrigger = ({
+  onSelect,
+}: {
+  onSelect: () => any;
+}) => {
+  // FIXME when we tie t() to lang state
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const appState = useExcalidrawAppState();
+
+  return (
+    <WelcomeScreenMenuItem shortcut={null} onSelect={onSelect} icon={usersIcon}>
+      {t("labels.liveCollaboration")}
+    </WelcomeScreenMenuItem>
+  );
+};
+MenuItemLiveCollaborationTrigger.displayName =
+  "MenuItemLiveCollaborationTrigger";
+
+// -----------------------------------------------------------------------------
+
+Center.Logo = Logo;
+Center.Heading = Heading;
+Center.Menu = Menu;
+Center.MenuItem = WelcomeScreenMenuItem;
+Center.MenuItemLink = WelcomeScreenMenuItemLink;
+Center.MenuItemHelp = MenuItemHelp;
+Center.MenuItemLoadScene = MenuItemLoadScene;
+Center.MenuItemLiveCollaborationTrigger = MenuItemLiveCollaborationTrigger;
+
+export { Center };

src/components/welcome-screen/WelcomeScreen.Hints.tsx

@@ -0,0 +1,42 @@
+import { t } from "../../i18n";
+import {
+  WelcomeScreenHelpArrow,
+  WelcomeScreenMenuArrow,
+  WelcomeScreenTopToolbarArrow,
+} from "../icons";
+
+const MenuHint = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu">
+      {WelcomeScreenMenuArrow}
+      <div className="welcome-screen-decor-hint__label">
+        {children || t("welcomeScreen.defaults.menuHint")}
+      </div>
+    </div>
+  );
+};
+MenuHint.displayName = "MenuHint";
+
+const ToolbarHint = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar">
+      <div className="welcome-screen-decor-hint__label">
+        {children || t("welcomeScreen.defaults.toolbarHint")}
+      </div>
+      {WelcomeScreenTopToolbarArrow}
+    </div>
+  );
+};
+ToolbarHint.displayName = "ToolbarHint";
+
+const HelpHint = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help">
+      <div>{children || t("welcomeScreen.defaults.helpHint")}</div>
+      {WelcomeScreenHelpArrow}
+    </div>
+  );
+};
+HelpHint.displayName = "HelpHint";
+
+export { HelpHint, MenuHint, ToolbarHint };

src/components/welcome-screen/WelcomeScreen.scss

@@ -3,29 +3,39 @@
     font-family: "Virgil";
   }
 
-  .WelcomeScreen-logo {
-    display: flex;
-    align-items: center;
-    column-gap: 0.75rem;
-    font-size: 2.25rem;
+  // WelcomeSreen common
+  // ---------------------------------------------------------------------------
 
-    svg {
-      width: 1.625rem;
-      height: auto;
-    }
-  }
-
-  .WelcomeScreen-decor {
+  .welcome-screen-decor {
     pointer-events: none;
 
     color: var(--color-gray-40);
+  }
 
-    &--subheading {
-      font-size: 1.125rem;
-      text-align: center;
+  &.theme--dark {
+    .welcome-screen-decor {
+      color: var(--color-gray-60);
+    }
+  }
+
+  // WelcomeScreen.Hints
+  // ---------------------------------------------------------------------------
+
+  .welcome-screen-decor-hint {
+    @media (max-height: 599px) {
+      display: none !important;
     }
 
-    &--help-pointer {
+    @media (max-width: 1024px), (max-width: 800px) {
+      .welcome-screen-decor {
+        &--help,
+        &--menu {
+          display: none;
+        }
+      }
+    }
+
+    &--help {
       display: flex;
       position: absolute;
       right: 0;
@@ -49,7 +59,7 @@
       }
     }
 
-    &--top-toolbar-pointer {
+    &--toolbar {
       position: absolute;
       top: 100%;
       left: 50%;
@@ -58,7 +68,7 @@
       display: flex;
       align-items: baseline;
 
-      &__label {
+      .welcome-screen-decor-hint__label {
         width: 120px;
         position: relative;
         top: -0.5rem;
@@ -74,7 +84,7 @@
       }
     }
 
-    &--menu-pointer {
+    &--menu {
       position: absolute;
       width: 320px;
       font-size: 1rem;
@@ -95,10 +105,19 @@
           transform: scaleX(-1);
         }
       }
+
+      @media (max-width: 860px) {
+        .welcome-screen-decor-hint__label {
+          max-width: 160px;
+        }
+      }
     }
   }
 
-  .WelcomeScreen-container {
+  // WelcomeSreen.Center
+  // ---------------------------------------------------------------------------
+
+  .welcome-screen-center {
     display: flex;
     flex-direction: column;
     gap: 2rem;
@@ -112,7 +131,24 @@
     bottom: 1rem;
   }
 
-  .WelcomeScreen-items {
+  .welcome-screen-center__logo {
+    display: flex;
+    align-items: center;
+    column-gap: 0.75rem;
+    font-size: 2.25rem;
+
+    svg {
+      width: 1.625rem;
+      height: auto;
+    }
+  }
+
+  .welcome-screen-center__heading {
+    font-size: 1.125rem;
+    text-align: center;
+  }
+
+  .welcome-screen-menu {
     display: flex;
     flex-direction: column;
     gap: 2px;
@@ -120,7 +156,7 @@
     align-items: center;
   }
 
-  .WelcomeScreen-item {
+  .welcome-screen-menu-item {
     box-sizing: border-box;
 
     pointer-events: all;
@@ -128,8 +164,10 @@
     color: var(--color-gray-50);
     font-size: 0.875rem;
 
+    width: 100%;
     min-width: 300px;
-    display: flex;
+    max-width: 400px;
+    display: grid;
     align-items: center;
     justify-content: space-between;
 
@@ -140,44 +178,49 @@
 
     border-radius: var(--border-radius-md);
 
-    &__label {
+    grid-template-columns: calc(var(--default-icon-size) + 0.5rem) 1fr 3rem;
+
+    &__text {
       display: flex;
       align-items: center;
+      margin-right: auto;
+      text-align: left;
       column-gap: 0.5rem;
+    }
 
-      svg {
-        width: var(--default-icon-size);
-        height: var(--default-icon-size);
-      }
+    &__icon {
+      width: var(--default-icon-size);
+      height: var(--default-icon-size);
     }
 
     &__shortcut {
+      margin-left: auto;
       color: var(--color-gray-40);
       font-size: 0.75rem;
     }
   }
 
-  &:not(:active) .WelcomeScreen-item:hover {
+  &:not(:active) .welcome-screen-menu-item:hover {
     text-decoration: none;
     background: var(--color-gray-10);
 
-    .WelcomeScreen-item__shortcut {
+    .welcome-screen-menu-item__shortcut {
       color: var(--color-gray-50);
     }
 
-    .WelcomeScreen-item__label {
+    .welcome-screen-menu-item__text {
       color: var(--color-gray-100);
     }
   }
 
-  .WelcomeScreen-item:active {
+  .welcome-screen-menu-item:active {
     background: var(--color-gray-20);
 
-    .WelcomeScreen-item__shortcut {
+    .welcome-screen-menu-item__shortcut {
       color: var(--color-gray-50);
     }
 
-    .WelcomeScreen-item__label {
+    .welcome-screen-menu-item__text {
       color: var(--color-gray-100);
     }
 
@@ -185,7 +228,7 @@
       color: var(--color-promo) !important;
 
       &:hover {
-        .WelcomeScreen-item__label {
+        .welcome-screen-menu-item__text {
           color: var(--color-promo) !important;
         }
       }
@@ -193,11 +236,7 @@
   }
 
   &.theme--dark {
-    .WelcomeScreen-decor {
-      color: var(--color-gray-60);
-    }
-
-    .WelcomeScreen-item {
+    .welcome-screen-menu-item {
       color: var(--color-gray-60);
 
       &__shortcut {
@@ -205,69 +244,41 @@
       }
     }
 
-    &:not(:active) .WelcomeScreen-item:hover {
+    &:not(:active) .welcome-screen-menu-item:hover {
       background: var(--color-gray-85);
 
-      .WelcomeScreen-item__shortcut {
+      .welcome-screen-menu-item__shortcut {
         color: var(--color-gray-50);
       }
 
-      .WelcomeScreen-item__label {
+      .welcome-screen-menu-item__text {
         color: var(--color-gray-10);
       }
     }
 
-    .WelcomeScreen-item:active {
+    .welcome-screen-menu-item:active {
       background-color: var(--color-gray-90);
-      .WelcomeScreen-item__label {
+      .welcome-screen-menu-item__text {
         color: var(--color-gray-10);
       }
     }
   }
 
-  // Can tweak these values but for an initial effort, it looks OK to me
-  @media (max-width: 1024px) {
-    .WelcomeScreen-decor {
-      &--help-pointer,
-      &--menu-pointer {
-        display: none;
-      }
-    }
-  }
-
-  // @media (max-height: 400px) {
-  //   .WelcomeScreen-container {
-  //     margin-top: 0;
-  //   }
-  // }
   @media (max-height: 599px) {
-    .WelcomeScreen-container {
+    .welcome-screen-center {
       margin-top: 4rem;
     }
   }
   @media (min-height: 600px) and (max-height: 900px) {
-    .WelcomeScreen-container {
+    .welcome-screen-center {
       margin-top: 8rem;
     }
   }
-  @media (max-height: 630px) {
-    .WelcomeScreen-decor--top-toolbar-pointer {
-      display: none;
-    }
-  }
-  @media (max-height: 500px) {
-    .WelcomeScreen-container {
+  @media (max-height: 500px), (max-width: 320px) {
+    .welcome-screen-center {
       display: none;
     }
   }
 
-  // @media (max-height: 740px) {
-  //   .WelcomeScreen-decor {
-  //     &--help-pointer,
-  //     &--top-toolbar-pointer,
-  //     &--menu-pointer {
-  //       display: none;
-  //     }
-  //   }
-  // }
+  // ---------------------------------------------------------------------------
 }

src/components/welcome-screen/WelcomeScreen.tsx

@@ -0,0 +1,17 @@
+import { Center } from "./WelcomeScreen.Center";
+import { MenuHint, ToolbarHint, HelpHint } from "./WelcomeScreen.Hints";
+
+import "./WelcomeScreen.scss";
+
+const WelcomeScreen = (props: { children: React.ReactNode }) => {
+  // NOTE this component is used as a dummy wrapper to retrieve child props
+  // from, and will never be rendered to DOM directly. As such, we can't
+  // do anything here (use hooks and such)
+  return null;
+};
+WelcomeScreen.displayName = "WelcomeScreen";
+
+WelcomeScreen.Center = Center;
+WelcomeScreen.Hints = { MenuHint, ToolbarHint, HelpHint };
+
+export default WelcomeScreen;

src/constants.ts

@@ -130,12 +130,6 @@ export const IDLE_THRESHOLD = 60_000;
 // Report a user active each ACTIVE_THRESHOLD milliseconds
 export const ACTIVE_THRESHOLD = 3_000;
 
-export const MODES = {
-  VIEW: "viewMode",
-  ZEN: "zenMode",
-  GRID: "gridMode",
-};
-
 export const THEME_FILTER = cssVariables.themeFilter;
 
 export const URL_QUERY_KEYS = {
@@ -156,6 +150,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
     toggleTheme: null,
     saveAsImage: true,
   },
+  welcomeScreen: true,
 };
 
 // breakpoints
@@ -216,8 +211,30 @@ export const TEXT_ALIGN = {
 
 export const ELEMENT_READY_TO_ERASE_OPACITY = 20;
 
-export const COOKIES = {
-  AUTH_STATE_COOKIE: "excplus-auth",
+// Radius represented as 25% of element's largest side (width/height).
+// Used for LEGACY and PROPORTIONAL_RADIUS algorithms, or when the element is
+// below the cutoff size.
+export const DEFAULT_PROPORTIONAL_RADIUS = 0.25;
+// Fixed radius for the ADAPTIVE_RADIUS algorithm. In pixels.
+export const DEFAULT_ADAPTIVE_RADIUS = 32;
+// roundness type (algorithm)
+export const ROUNDNESS = {
+  // Used for legacy rounding (rectangles), which currently works the same
+  // as PROPORTIONAL_RADIUS, but we need to differentiate for UI purposes and
+  // forwards-compat.
+  LEGACY: 1,
+
+  // Used for linear elements & diamonds
+  PROPORTIONAL_RADIUS: 2,
+
+  // Current default algorithm for rectangles, using fixed pixel radius.
+  // It's working similarly to a regular border-radius, but attemps to make
+  // radius visually similar across differnt element sizes, especially
+  // very large and very small elements.
+  //
+  // NOTE right now we don't allow configuration and use a constant radius
+  // (see DEFAULT_ADAPTIVE_RADIUS constant)
+  ADAPTIVE_RADIUS: 3,
 } as const;
 
 /** key containt id of precedeing elemnt id we use in reconciliation during

src/css/styles.scss

@@ -408,7 +408,7 @@
     pointer-events: all;
 
     &:hover {
-      background-color: var(--button-hover);
+      background-color: var(--button-hover-bg);
     }
 
     &:active {
@@ -540,9 +540,9 @@
   }
 
   .mobile-misc-tools-container {
-    position: fixed;
-    top: 5rem;
-    right: 0;
+    position: absolute;
+    top: calc(5rem - var(--editor-container-padding));
+    right: calc(var(--editor-container-padding) * -1);
     display: flex;
     flex-direction: column;
     border: 1px solid var(--sidebar-border-color);
@@ -569,6 +569,20 @@
       display: none;
     }
   }
+  .UserList-Wrapper {
+    margin: 0;
+    padding: 0;
+    border: none;
+    text-align: left;
+
+    legend {
+      display: block;
+      font-size: 0.75rem;
+      font-weight: 400;
+      margin: 0 0 0.25rem;
+      padding: 0;
+    }
+  }
 }
 
 .ErrorSplash.excalidraw {

src/css/theme.scss

@@ -35,13 +35,14 @@
   --shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05),
     0px 0px 3.12708px rgba(0, 0, 0, 0.0798),
     0px 0px 0.931014px rgba(0, 0, 0, 0.1702);
-  --button-hover: var(--color-gray-10);
+  --button-hover-bg: var(--color-gray-10);
   --default-border-color: var(--color-gray-30);
 
   --default-button-size: 2rem;
   --default-icon-size: 1rem;
   --lg-button-size: 2.25rem;
   --lg-icon-size: 1rem;
+  --editor-container-padding: 1rem;
 
   @media screen and (min-device-width: 1921px) {
     --lg-button-size: 2.5rem;
@@ -135,7 +136,7 @@
     --popup-text-inverted-color: #2c2c2c;
     --select-highlight-color: #{$oc-blue-4};
     --text-primary-color: var(--color-gray-40);
-    --button-hover: var(--color-gray-80);
+    --button-hover-bg: var(--color-gray-80);
     --default-border-color: var(--color-gray-80);
     --shadow-island: 0px 13px 33px rgba(0, 0, 0, 0.07),
       0px 4.13px 9.94853px rgba(0, 0, 0, 0.0456112),

src/css/variables.module.scss

@@ -39,11 +39,11 @@
 
   .ToolIcon__icon {
     &:hover {
-      background: var(--button-hover);
+      background: var(--button-hover-bg);
     }
 
     &:active {
-      background: var(--button-hover);
+      background: var(--button-hover-bg);
       border: 1px solid var(--color-primary-darkest);
     }
   }
@@ -54,24 +54,25 @@
   justify-content: center;
   align-items: center;
   padding: 0.625rem;
-  width: var(--default-button-size);
-  height: var(--default-button-size);
+  width: var(--button-width, var(--default-button-size));
+  height: var(--button-height, var(--default-button-size));
   box-sizing: border-box;
   border-width: 1px;
   border-style: solid;
-  border-color: var(--default-border-color);
+  border-color: var(--button-border, var(--default-border-color));
   border-radius: var(--border-radius-lg);
   cursor: pointer;
-  background-color: transparent;
-  color: var(--text-primary-color);
+  background-color: var(--button-bg, var(--island-bg-color));
+  color: var(--button-color, var(--text-primary-color));
 
   &:hover {
-    background-color: var(--button-hover);
+    background-color: var(--button-hover-bg);
+    border-color: var(--button-hover-border, var(--default-border-color));
   }
 
   &:active {
-    background-color: var(--button-hover);
-    border-color: var(--color-primary-darkest);
+    background-color: var(--button-active-bg);
+    border-color: var(--button-active-border, var(--color-primary-darkest));
   }
 
   &.active {
@@ -83,7 +84,10 @@
     }
 
     svg {
-      color: var(--color-primary-darker);
+      color: var(--button-color, var(--color-primary-darker));
+
+      width: var(--button-width, var(--lg-icon-size));
+      height: var(--button-height, var(--lg-icon-size));
     }
   }
 }

src/data/library.ts

@@ -154,7 +154,8 @@ class Library {
     return this.setLibrary(() => {
       return new Promise<LibraryItems>(async (resolve, reject) => {
         try {
-          const source = await (typeof libraryItems === "function"
+          const source = await (typeof libraryItems === "function" &&
+          !(libraryItems instanceof Blob)
             ? libraryItems(this.lastLibraryItems)
             : libraryItems);
 

src/data/restore.ts

@@ -1,7 +1,9 @@
 import {
   ExcalidrawElement,
   ExcalidrawSelectionElement,
+  ExcalidrawTextElement,
   FontFamilyValues,
+  StrokeRoundness,
 } from "../element/types";
 import {
   AppState,
@@ -16,7 +18,7 @@ import {
   isInvisiblySmallElement,
   refreshTextDimensions,
 } from "../element";
-import { isLinearElementType } from "../element/typeChecks";
+import { isTextElement, isUsingAdaptiveRadius } from "../element/typeChecks";
 import { randomId } from "../random";
 import {
   DEFAULT_FONT_FAMILY,
@@ -24,12 +26,14 @@ import {
   DEFAULT_VERTICAL_ALIGN,
   PRECEDING_ELEMENT_KEY,
   FONT_FAMILY,
+  ROUNDNESS,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
 import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
+import oc from "open-color";
 
 type RestoredAppState = Omit<
   AppState,
@@ -73,6 +77,8 @@ const restoreElementWithProperties = <
     customData?: ExcalidrawElement["customData"];
     /** @deprecated */
     boundElementIds?: readonly ExcalidrawElement["id"][];
+    /** @deprecated */
+    strokeSharpness?: StrokeRoundness;
     /** metadata that may be present in elements during collaboration */
     [PRECEDING_ELEMENT_KEY]?: string;
   },
@@ -105,15 +111,23 @@ const restoreElementWithProperties = <
     angle: element.angle || 0,
     x: extra.x ?? element.x ?? 0,
     y: extra.y ?? element.y ?? 0,
-    strokeColor: element.strokeColor,
-    backgroundColor: element.backgroundColor,
+    strokeColor: element.strokeColor || oc.black,
+    backgroundColor: element.backgroundColor || "transparent",
     width: element.width || 0,
     height: element.height || 0,
     seed: element.seed ?? 1,
     groupIds: element.groupIds ?? [],
-    strokeSharpness:
-      element.strokeSharpness ??
-      (isLinearElementType(element.type) ? "round" : "sharp"),
+    roundness: element.roundness
+      ? element.roundness
+      : element.strokeSharpness === "round"
+      ? {
+          // for old elements that would now use adaptive radius algo,
+          // use legacy algo instead
+          type: isUsingAdaptiveRadius(element.type)
+            ? ROUNDNESS.LEGACY
+            : ROUNDNESS.PROPORTIONAL_RADIUS,
+        }
+      : null,
     boundElements: element.boundElementIds
       ? element.boundElementIds.map((id) => ({ type: "arrow", id }))
       : element.boundElements ?? [],
@@ -139,7 +153,7 @@ const restoreElementWithProperties = <
 
 const restoreElement = (
   element: Exclude<ExcalidrawElement, ExcalidrawSelectionElement>,
-  refreshDimensions = true,
+  refreshDimensions = false,
 ): typeof element | null => {
   switch (element.type) {
     case "text":
@@ -235,14 +249,99 @@ const restoreElement = (
   }
 };
 
+/**
+ * Repairs contaienr element's boundElements array by removing duplicates and
+ * fixing containerId of bound elements if not present. Also removes any
+ * bound elements that do not exist in the elements array.
+ *
+ * NOTE mutates elements.
+ */
+const repairContainerElement = (
+  container: Mutable<ExcalidrawElement>,
+  elementsMap: Map<string, Mutable<ExcalidrawElement>>,
+) => {
+  if (container.boundElements) {
+    // copy because we're not cloning on restore, and we don't want to mutate upstream
+    const boundElements = container.boundElements.slice();
+
+    // dedupe bindings & fix boundElement.containerId if not set already
+    const boundIds = new Set<ExcalidrawElement["id"]>();
+    container.boundElements = boundElements.reduce(
+      (
+        acc: Mutable<NonNullable<ExcalidrawElement["boundElements"]>>,
+        binding,
+      ) => {
+        const boundElement = elementsMap.get(binding.id);
+        if (boundElement && !boundIds.has(binding.id)) {
+          boundIds.add(binding.id);
+
+          if (boundElement.isDeleted) {
+            return acc;
+          }
+
+          acc.push(binding);
+
+          if (
+            isTextElement(boundElement) &&
+            // being slightly conservative here, preserving existing containerId
+            // if defined, lest boundElements is stale
+            !boundElement.containerId
+          ) {
+            (boundElement as Mutable<ExcalidrawTextElement>).containerId =
+              container.id;
+          }
+        }
+        return acc;
+      },
+      [],
+    );
+  }
+};
+
+/**
+ * Repairs target bound element's container's boundElements array,
+ * or removes contaienrId if container does not exist.
+ *
+ * NOTE mutates elements.
+ */
+const repairBoundElement = (
+  boundElement: Mutable<ExcalidrawTextElement>,
+  elementsMap: Map<string, Mutable<ExcalidrawElement>>,
+) => {
+  const container = boundElement.containerId
+    ? elementsMap.get(boundElement.containerId)
+    : null;
+
+  if (!container) {
+    boundElement.containerId = null;
+    return;
+  }
+
+  if (boundElement.isDeleted) {
+    return;
+  }
+
+  if (
+    container.boundElements &&
+    !container.boundElements.find((binding) => binding.id === boundElement.id)
+  ) {
+    // copy because we're not cloning on restore, and we don't want to mutate upstream
+    const boundElements = (
+      container.boundElements || (container.boundElements = [])
+    ).slice();
+    boundElements.push({ type: "text", id: boundElement.id });
+    container.boundElements = boundElements;
+  }
+};
+
 export const restoreElements = (
   elements: ImportedDataState["elements"],
   /** NOTE doesn't serve for reconciliation */
   localElements: readonly ExcalidrawElement[] | null | undefined,
-  refreshDimensions = true,
+  refreshDimensions = false,
 ): ExcalidrawElement[] => {
   const localElementsMap = localElements ? arrayToMap(localElements) : null;
-  return (elements || []).reduce((elements, element) => {
+  const restoredElements = (elements || []).reduce((elements, element) => {
     // filtering out selection, which is legacy, no longer kept in elements,
     // and causing issues if retained
     if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
@@ -260,6 +359,18 @@ export const restoreElements = (
     }
     return elements;
   }, [] as ExcalidrawElement[]);
+
+  // repair binding. Mutates elements.
+  const restoredElementsMap = arrayToMap(restoredElements);
+  for (const element of restoredElements) {
+    if (isTextElement(element) && element.containerId) {
+      repairBoundElement(element, restoredElementsMap);
+    } else if (element.boundElements) {
+      repairContainerElement(element, restoredElementsMap);
+    }
+  }
+
+  return restoredElements;
 };
 
 const coalesceAppStateValue = <
@@ -387,7 +498,7 @@ export const restore = (
   localElements: readonly ExcalidrawElement[] | null | undefined,
 ): RestoredDataState => {
   return {
-    elements: restoreElements(data?.elements, localElements, true),
+    elements: restoreElements(data?.elements, localElements),
     appState: restoreAppState(data?.appState, localAppState || null),
     files: data?.files || {},
   };

src/element/Hyperlink.tsx

@@ -267,7 +267,7 @@ export const actionLink = register({
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.K,
   contextItemLabel: (elements, appState) =>
     getContextMenuLabel(elements, appState),
-  contextItemPredicate: (elements, appState) => {
+  predicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     return selectedElements.length === 1;
   },

src/element/binding.ts

@@ -26,6 +26,7 @@ import Scene from "../scene/Scene";
 import { LinearElementEditor } from "./linearElementEditor";
 import { arrayToMap, tupleToCoors } from "../utils";
 import { KEYS } from "../keys";
+import { getBoundTextElement, handleBindTextResize } from "./textElement";
 
 export type SuggestedBinding =
   | NonDeleted<ExcalidrawBindableElement>
@@ -361,6 +362,10 @@ export const updateBoundElements = (
       endBinding,
       changedElement as ExcalidrawBindableElement,
     );
+    const boundText = getBoundTextElement(element);
+    if (boundText) {
+      handleBindTextResize(element, false);
+    }
   });
 };
 

src/element/bounds.test.ts

@@ -1,3 +1,4 @@
+import { ROUNDNESS } from "../constants";
 import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
 import { ExcalidrawElement, ExcalidrawLinearElement } from "./types";
 
@@ -22,6 +23,7 @@ const _ce = ({
     backgroundColor: "#000",
     fillStyle: "solid",
     strokeWidth: 1,
+    roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
     roughness: 0,
     opacity: 1,
     x,

src/element/bounds.ts

@@ -4,6 +4,7 @@ import {
   Arrowhead,
   ExcalidrawFreeDrawElement,
   NonDeleted,
+  ExcalidrawTextElementWithContainer,
 } from "./types";
 import { distance2d, rotate } from "../math";
 import rough from "roughjs/bin/rough";
@@ -13,8 +14,15 @@ import {
   getShapeForElement,
   generateRoughOptions,
 } from "../renderer/renderElement";
-import { isFreeDrawElement, isLinearElement } from "./typeChecks";
+import {
+  isArrowElement,
+  isFreeDrawElement,
+  isLinearElement,
+  isTextElement,
+} from "./typeChecks";
 import { rescalePoints } from "../points";
+import { getBoundTextElement, getContainerElement } from "./textElement";
+import { LinearElementEditor } from "./linearElementEditor";
 
 // x and y position of top left corner, x and y position of bottom right corner
 export type Bounds = readonly [number, number, number, number];
@@ -24,17 +32,39 @@ type MaybeQuadraticSolution = [number | null, number | null] | false;
 // This set of functions retrieves the absolute position of the 4 points.
 export const getElementAbsoluteCoords = (
   element: ExcalidrawElement,
-): Bounds => {
+  includeBoundText: boolean = false,
+): [number, number, number, number, number, number] => {
   if (isFreeDrawElement(element)) {
     return getFreeDrawElementAbsoluteCoords(element);
   } else if (isLinearElement(element)) {
-    return getLinearElementAbsoluteCoords(element);
+    return LinearElementEditor.getElementAbsoluteCoords(
+      element,
+      includeBoundText,
+    );
+  } else if (isTextElement(element)) {
+    const container = getContainerElement(element);
+    if (isArrowElement(container)) {
+      const coords = LinearElementEditor.getBoundTextElementPosition(
+        container,
+        element as ExcalidrawTextElementWithContainer,
+      );
+      return [
+        coords.x,
+        coords.y,
+        coords.x + element.width,
+        coords.y + element.height,
+        coords.x + element.width / 2,
+        coords.y + element.height / 2,
+      ];
+    }
   }
   return [
     element.x,
     element.y,
     element.x + element.width,
     element.y + element.height,
+    element.x + element.width / 2,
+    element.y + element.height / 2,
   ];
 };
 
@@ -159,7 +189,7 @@ const getCubicBezierCurveBound = (
   return [minX, minY, maxX, maxY];
 };
 
-const getMinMaxXYFromCurvePathOps = (
+export const getMinMaxXYFromCurvePathOps = (
   ops: Op[],
   transformXY?: (x: number, y: number) => [number, number],
 ): [number, number, number, number] => {
@@ -230,59 +260,13 @@ const getBoundsFromPoints = (
 
 const getFreeDrawElementAbsoluteCoords = (
   element: ExcalidrawFreeDrawElement,
-): [number, number, number, number] => {
+): [number, number, number, number, number, number] => {
   const [minX, minY, maxX, maxY] = getBoundsFromPoints(element.points);
-
-  return [
-    minX + element.x,
-    minY + element.y,
-    maxX + element.x,
-    maxY + element.y,
-  ];
-};
-
-const getLinearElementAbsoluteCoords = (
-  element: ExcalidrawLinearElement,
-): [number, number, number, number] => {
-  let coords: [number, number, number, number];
-
-  if (element.points.length < 2 || !getShapeForElement(element)) {
-    // XXX this is just a poor estimate and not very useful
-    const { minX, minY, maxX, maxY } = element.points.reduce(
-      (limits, [x, y]) => {
-        limits.minY = Math.min(limits.minY, y);
-        limits.minX = Math.min(limits.minX, x);
-
-        limits.maxX = Math.max(limits.maxX, x);
-        limits.maxY = Math.max(limits.maxY, y);
-
-        return limits;
-      },
-      { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
-    );
-    coords = [
-      minX + element.x,
-      minY + element.y,
-      maxX + element.x,
-      maxY + element.y,
-    ];
-  } else {
-    const shape = getShapeForElement(element)!;
-
-    // first element is always the curve
-    const ops = getCurvePathOps(shape[0]);
-
-    const [minX, minY, maxX, maxY] = getMinMaxXYFromCurvePathOps(ops);
-
-    coords = [
-      minX + element.x,
-      minY + element.y,
-      maxX + element.x,
-      maxY + element.y,
-    ];
-  }
-
-  return coords;
+  const x1 = minX + element.x;
+  const y1 = minY + element.y;
+  const x2 = maxX + element.x;
+  const y2 = maxY + element.y;
+  return [x1, y1, x2, y2, (x1 + x2) / 2, (y1 + y2) / 2];
 };
 
 export const getArrowheadPoints = (
@@ -394,7 +378,7 @@ const generateLinearElementShape = (
   const options = generateRoughOptions(element);
 
   const method = (() => {
-    if (element.strokeSharpness !== "sharp") {
+    if (element.roundness) {
       return "curve";
     }
     if (options.fill) {
@@ -420,7 +404,23 @@ const getLinearElementRotatedBounds = (
       cy,
       element.angle,
     );
-    return [x, y, x, y];
+
+    let coords: [number, number, number, number] = [x, y, x, y];
+    const boundTextElement = getBoundTextElement(element);
+    if (boundTextElement) {
+      const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
+        element,
+        [x, y, x, y],
+        boundTextElement,
+      );
+      coords = [
+        coordsWithBoundText[0],
+        coordsWithBoundText[1],
+        coordsWithBoundText[2],
+        coordsWithBoundText[3],
+      ];
+    }
+    return coords;
   }
 
   // first element is always the curve
@@ -429,8 +429,28 @@ const getLinearElementRotatedBounds = (
   const ops = getCurvePathOps(shape);
   const transformXY = (x: number, y: number) =>
     rotate(element.x + x, element.y + y, cx, cy, element.angle);
-
-  return getMinMaxXYFromCurvePathOps(ops, transformXY);
+  const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
+  let coords: [number, number, number, number] = [
+    res[0],
+    res[1],
+    res[2],
+    res[3],
+  ];
+  const boundTextElement = getBoundTextElement(element);
+  if (boundTextElement) {
+    const coordsWithBoundText = LinearElementEditor.getMinMaxXYWithBoundText(
+      element,
+      coords,
+      boundTextElement,
+    );
+    coords = [
+      coordsWithBoundText[0],
+      coordsWithBoundText[1],
+      coordsWithBoundText[2],
+      coordsWithBoundText[3],
+    ];
+  }
+  return coords;
 };
 
 // We could cache this stuff
@@ -439,9 +459,7 @@ export const getElementBounds = (
 ): [number, number, number, number] => {
   let bounds: [number, number, number, number];
 
-  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
-  const cx = (x1 + x2) / 2;
-  const cy = (y1 + y2) / 2;
+  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element);
   if (isFreeDrawElement(element)) {
     const [minX, minY, maxX, maxY] = getBoundsFromPoints(
       element.points.map(([x, y]) =>
@@ -543,16 +561,12 @@ export const getResizedElementAbsoluteCoords = (
   } else {
     // Line
     const gen = rough.generator();
-    const curve =
-      element.strokeSharpness === "sharp"
-        ? gen.linearPath(
-            points as [number, number][],
-            generateRoughOptions(element),
-          )
-        : gen.curve(
-            points as [number, number][],
-            generateRoughOptions(element),
-          );
+    const curve = !element.roundness
+      ? gen.linearPath(
+          points as [number, number][],
+          generateRoughOptions(element),
+        )
+      : gen.curve(points as [number, number][], generateRoughOptions(element));
 
     const ops = getCurvePathOps(curve);
     bounds = getMinMaxXYFromCurvePathOps(ops);
@@ -570,12 +584,11 @@ export const getResizedElementAbsoluteCoords = (
 export const getElementPointsCoords = (
   element: ExcalidrawLinearElement,
   points: readonly (readonly [number, number])[],
-  sharpness: ExcalidrawElement["strokeSharpness"],
 ): [number, number, number, number] => {
   // This might be computationally heavey
   const gen = rough.generator();
   const curve =
-    sharpness === "sharp"
+    element.roundness == null
       ? gen.linearPath(
           points as [number, number][],
           generateRoughOptions(element),

src/element/collision.ts

@@ -25,6 +25,7 @@ import {
   ExcalidrawFreeDrawElement,
   ExcalidrawImageElement,
   ExcalidrawLinearElement,
+  StrokeRoundness,
 } from "./types";
 
 import { getElementAbsoluteCoords, getCurvePathOps, Bounds } from "./bounds";
@@ -36,6 +37,7 @@ import { hasBoundTextElement, isImageElement } from "./typeChecks";
 import { isTextElement } from ".";
 import { isTransparent } from "../utils";
 import { shouldShowBoundingBox } from "./transformHandles";
+import { getBoundTextElement } from "./textElement";
 
 const isElementDraggableFromInside = (
   element: NonDeletedExcalidrawElement,
@@ -72,6 +74,13 @@ export const hitTest = (
     return isPointHittingElementBoundingBox(element, point, threshold);
   }
 
+  const boundTextElement = getBoundTextElement(element);
+  if (boundTextElement) {
+    const isHittingBoundTextElement = hitTest(boundTextElement, appState, x, y);
+    if (isHittingBoundTextElement) {
+      return true;
+    }
+  }
   return isHittingElementNotConsideringBoundingBox(element, appState, point);
 };
 
@@ -83,6 +92,13 @@ export const isHittingElementBoundingBoxWithoutHittingElement = (
 ): boolean => {
   const threshold = 10 / appState.zoom.value;
 
+  // So that bound text element hit is considered within bounding box of container even if its outside actual bounding box of element
+  // eg for linear elements text can be outside the element bounding box
+  const boundTextElement = getBoundTextElement(element);
+  if (boundTextElement && hitTest(boundTextElement, appState, x, y)) {
+    return false;
+  }
+
   return (
     !isHittingElementNotConsideringBoundingBox(element, appState, [x, y]) &&
     isPointHittingElementBoundingBox(element, [x, y], threshold)
@@ -95,7 +111,6 @@ export const isHittingElementNotConsideringBoundingBox = (
   point: Point,
 ): boolean => {
   const threshold = 10 / appState.zoom.value;
-
   const check = isTextElement(element)
     ? isStrictlyInside
     : isElementDraggableFromInside(element)
@@ -382,6 +397,7 @@ const hitTestLinear = (args: HitTestArgs): boolean => {
   if (!getShapeForElement(element)) {
     return false;
   }
+
   const [point, pointAbs, hwidth, hheight] = pointRelativeToElement(
     args.element,
     args.point,
@@ -404,7 +420,12 @@ const hitTestLinear = (args: HitTestArgs): boolean => {
 
   if (args.check === isInsideCheck) {
     const hit = shape.some((subshape) =>
-      hitTestCurveInside(subshape, relX, relY, element.strokeSharpness),
+      hitTestCurveInside(
+        subshape,
+        relX,
+        relY,
+        element.roundness ? "round" : "sharp",
+      ),
     );
     if (hit) {
       return true;
@@ -434,8 +455,9 @@ const pointRelativeToElement = (
   pointTuple: Point,
 ): [GA.Point, GA.Point, number, number] => {
   const point = GAPoint.from(pointTuple);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
   const elementCoords = getElementAbsoluteCoords(element);
-  const center = coordsCenter(elementCoords);
+  const center = coordsCenter([x1, y1, x2, y2]);
   // GA has angle orientation opposite to `rotate`
   const rotate = GATransform.rotation(center, element.angle);
   const pointRotated = GATransform.apply(rotate, point);
@@ -466,8 +488,8 @@ export const pointInAbsoluteCoords = (
 const relativizationToElementCenter = (
   element: ExcalidrawElement,
 ): GA.Transform => {
-  const elementCoords = getElementAbsoluteCoords(element);
-  const center = coordsCenter(elementCoords);
+  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+  const center = coordsCenter([x1, y1, x2, y2]);
   // GA has angle orientation opposite to `rotate`
   const rotate = GATransform.rotation(center, element.angle);
   const translate = GA.reverse(
@@ -524,8 +546,8 @@ export const determineFocusPoint = (
   adjecentPoint: Point,
 ): Point => {
   if (focus === 0) {
-    const elementCoords = getElementAbsoluteCoords(element);
-    const center = coordsCenter(elementCoords);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const center = coordsCenter([x1, y1, x2, y2]);
     return GAPoint.toTuple(center);
   }
   const relateToCenter = relativizationToElementCenter(element);
@@ -835,7 +857,7 @@ const hitTestCurveInside = (
   drawable: Drawable,
   x: number,
   y: number,
-  sharpness: ExcalidrawElement["strokeSharpness"],
+  roundness: StrokeRoundness,
 ) => {
   const ops = getCurvePathOps(drawable);
   const points: Mutable<Point>[] = [];
@@ -859,7 +881,7 @@ const hitTestCurveInside = (
     }
   }
   if (points.length >= 4) {
-    if (sharpness === "sharp") {
+    if (roundness === "sharp") {
       return isPointInPolygon(points, x, y);
     }
     const polygonPoints = pointsOnBezierCurves(points, 10, 5);