Update renderElement.ts

package.json

@@ -28,6 +28,7 @@
     "@types/pica": "5.1.3",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
+    "@types/socket.io-client": "1.4.36",
     "browser-fs-access": "0.29.1",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
@@ -53,7 +54,7 @@
     "react-scripts": "5.0.1",
     "roughjs": "4.5.2",
     "sass": "1.51.0",
-    "socket.io-client": "4.5.4",
+    "socket.io-client": "2.3.1",
     "typescript": "4.9.4",
     "workbox-background-sync": "^6.5.4",
     "workbox-broadcast-update": "^6.5.4",

src/actions/actionCanvas.tsx

@@ -23,7 +23,7 @@ import { newElementWith } from "../element/mutateElement";
 import { getDefaultAppState, isEraserActive } from "../appState";
 import ClearCanvas from "../components/ClearCanvas";
 import clsx from "clsx";
-import DropdownMenuItem from "../components/dropdownMenu/DropdownMenuItem";
+import MenuItem from "../components/MenuItem";
 import { getShortcutFromShortcutName } from "./shortcuts";
 
 export const actionChangeViewBackgroundColor = register({
@@ -299,23 +299,19 @@ export const actionToggleTheme = register({
     };
   },
   PanelComponent: ({ appState, updateData }) => (
-    <DropdownMenuItem
+    <MenuItem
-      onSelect={() => {
+      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")}
-      ariaLabel={
+    />
-        appState.theme === "dark"
-          ? t("buttons.lightMode")
-          : t("buttons.darkMode")
-      }
-    >
-      {appState.theme === "dark"
-        ? t("buttons.lightMode")
-        : t("buttons.darkMode")}
-    </DropdownMenuItem>
   ),
   keyTest: (event) => event.altKey && event.shiftKey && event.code === CODES.D,
 });

src/actions/actionExport.tsx

@@ -19,7 +19,7 @@ import { ActiveFile } from "../components/ActiveFile";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
 import { Theme } from "../element/types";
-import DropdownMenuItem from "../components/dropdownMenu/DropdownMenuItem";
+import MenuItem from "../components/MenuItem";
 import { getShortcutFromShortcutName } from "./shortcuts";
 
 export const actionChangeProjectName = register({
@@ -247,19 +247,15 @@ export const actionLoadScene = register({
     }
   },
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.O,
-  PanelComponent: ({ updateData }) => {
+  PanelComponent: ({ updateData }) => (
-    return (
+    <MenuItem
-      <DropdownMenuItem
+      label={t("buttons.load")}
-        icon={LoadIcon}
+      icon={LoadIcon}
-        onSelect={updateData}
+      onClick={updateData}
-        dataTestId="load-button"
+      dataTestId="load-button"
-        shortcut={getShortcutFromShortcutName("loadScene")}
+      shortcut={getShortcutFromShortcutName("loadScene")}
-        ariaLabel={t("buttons.load")}
+    />
-      >
+  ),
-        {t("buttons.load")}
-      </DropdownMenuItem>
-    );
-  },
 });
 
 export const actionExportWithDarkMode = register({

src/actions/actionMenu.tsx

@@ -6,7 +6,7 @@ import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";
 import { HelpButton } from "../components/HelpButton";
-import DropdownMenuItem from "../components/dropdownMenu/DropdownMenuItem";
+import MenuItem from "../components/MenuItem";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -90,15 +90,13 @@ export const actionShortcuts = register({
   },
   PanelComponent: ({ updateData, isInHamburgerMenu }) =>
     isInHamburgerMenu ? (
-      <DropdownMenuItem
+      <MenuItem
+        label={t("helpDialog.title")}
         dataTestId="help-menu-item"
         icon={HelpIcon}
-        onSelect={updateData}
+        onClick={updateData}
         shortcut="?"
-        ariaLabel={t("helpDialog.title")}
+      />
-      >
-        {t("helpDialog.title")}
-      </DropdownMenuItem>
     ) : (
       <HelpButton title={t("helpDialog.title")} onClick={updateData} />
     ),

src/components/ActiveFile.tsx

@@ -5,7 +5,7 @@ import { save } from "../components/icons";
 import { t } from "../i18n";
 
 import "./ActiveFile.scss";
-import DropdownMenuItem from "./dropdownMenu/DropdownMenuItem";
+import MenuItem from "./MenuItem";
 
 type ActiveFileProps = {
   fileName?: string;
@@ -13,11 +13,11 @@ type ActiveFileProps = {
 };
 
 export const ActiveFile = ({ fileName, onSave }: ActiveFileProps) => (
-  <DropdownMenuItem
+  <MenuItem
+    label={`${t("buttons.save")}`}
     shortcut={getShortcutFromShortcutName("saveScene")}
     dataTestId="save-button"
-    onSelect={onSave}
+    onClick={onSave}
     icon={save}
-    ariaLabel={`${t("buttons.save")}`}
+  />
-  >{`${t("buttons.save")}`}</DropdownMenuItem>
 );

src/components/App.tsx

@@ -272,9 +272,13 @@ import {
   isLocalLink,
 } from "../element/Hyperlink";
 import { shouldShowBoundingBox } from "../element/transformHandles";
+import { atom } from "jotai";
 import { Fonts } from "../scene/Fonts";
 import { actionPaste } from "../actions/actionClipboard";
 
+export const isMenuOpenAtom = atom(false);
+export const isDropdownOpenAtom = atom(false);
+
 const deviceContextInitialValue = {
   isSmScreen: false,
   isMobile: false,
@@ -285,7 +289,7 @@ const DeviceContext = React.createContext<Device>(deviceContextInitialValue);
 DeviceContext.displayName = "DeviceContext";
 export const useDevice = () => useContext<Device>(DeviceContext);
 
-export const ExcalidrawContainerContext = React.createContext<{
+const ExcalidrawContainerContext = React.createContext<{
   container: HTMLDivElement | null;
   id: string | null;
 }>({ container: null, id: null });
@@ -312,19 +316,12 @@ const ExcalidrawSetAppStateContext = React.createContext<
 >(() => {});
 ExcalidrawSetAppStateContext.displayName = "ExcalidrawSetAppStateContext";
 
-const ExcalidrawActionManagerContext = React.createContext<
-  ActionManager | { renderAction: ActionManager["renderAction"] }
->({ renderAction: () => null });
-ExcalidrawActionManagerContext.displayName = "ExcalidrawActionManagerContext";
-
 export const useExcalidrawElements = () =>
   useContext(ExcalidrawElementsContext);
 export const useExcalidrawAppState = () =>
   useContext(ExcalidrawAppStateContext);
 export const useExcalidrawSetAppState = () =>
   useContext(ExcalidrawSetAppStateContext);
-export const useExcalidrawActionManager = () =>
-  useContext(ExcalidrawActionManagerContext);
 
 let didTapTwice: boolean = false;
 let tappedTwiceTimer = 0;
@@ -562,79 +559,75 @@ class App extends React.Component<AppProps, AppState> {
                 <ExcalidrawElementsContext.Provider
                   value={this.scene.getNonDeletedElements()}
                 >
-                  <ExcalidrawActionManagerContext.Provider
+                  <LayerUI
-                    value={this.actionManager}
+                    canvas={this.canvas}
+                    appState={this.state}
+                    files={this.files}
+                    setAppState={this.setAppState}
+                    actionManager={this.actionManager}
+                    elements={this.scene.getNonDeletedElements()}
+                    onCollabButtonClick={onCollabButtonClick}
+                    onLockToggle={this.toggleLock}
+                    onPenModeToggle={this.togglePenMode}
+                    onInsertElements={(elements) =>
+                      this.addElementsFromPasteOrLibrary({
+                        elements,
+                        position: "center",
+                        files: null,
+                      })
+                    }
+                    langCode={getLanguage().code}
+                    isCollaborating={this.props.isCollaborating}
+                    renderTopRightUI={renderTopRightUI}
+                    renderCustomStats={renderCustomStats}
+                    renderCustomSidebar={this.props.renderSidebar}
+                    showExitZenModeBtn={
+                      typeof this.props?.zenModeEnabled === "undefined" &&
+                      this.state.zenModeEnabled
+                    }
+                    libraryReturnUrl={this.props.libraryReturnUrl}
+                    UIOptions={this.props.UIOptions}
+                    focusContainer={this.focusContainer}
+                    library={this.library}
+                    id={this.id}
+                    onImageAction={this.onImageAction}
+                    renderWelcomeScreen={
+                      this.state.showWelcomeScreen &&
+                      this.state.activeTool.type === "selection" &&
+                      !this.scene.getElementsIncludingDeleted().length
+                    }
                   >
-                    <LayerUI
+                    {this.props.children}
-                      canvas={this.canvas}
+                  </LayerUI>
-                      appState={this.state}
+                  <div className="excalidraw-textEditorContainer" />
-                      files={this.files}
+                  <div className="excalidraw-contextMenuContainer" />
-                      setAppState={this.setAppState}
+                  {selectedElement.length === 1 &&
+                    !this.state.contextMenu &&
+                    this.state.showHyperlinkPopup && (
+                      <Hyperlink
+                        key={selectedElement[0].id}
+                        element={selectedElement[0]}
+                        setAppState={this.setAppState}
+                        onLinkOpen={this.props.onLinkOpen}
+                      />
+                    )}
+                  {this.state.toast !== null && (
+                    <Toast
+                      message={this.state.toast.message}
+                      onClose={() => this.setToast(null)}
+                      duration={this.state.toast.duration}
+                      closable={this.state.toast.closable}
+                    />
+                  )}
+                  {this.state.contextMenu && (
+                    <ContextMenu
+                      items={this.state.contextMenu.items}
+                      top={this.state.contextMenu.top}
+                      left={this.state.contextMenu.left}
                       actionManager={this.actionManager}
-                      elements={this.scene.getNonDeletedElements()}
+                    />
-                      onCollabButtonClick={onCollabButtonClick}
+                  )}
-                      onLockToggle={this.toggleLock}
+                  <main>{this.renderCanvas()}</main>
-                      onPenModeToggle={this.togglePenMode}
-                      onInsertElements={(elements) =>
-                        this.addElementsFromPasteOrLibrary({
-                          elements,
-                          position: "center",
-                          files: null,
-                        })
-                      }
-                      langCode={getLanguage().code}
-                      isCollaborating={this.props.isCollaborating}
-                      renderTopRightUI={renderTopRightUI}
-                      renderCustomStats={renderCustomStats}
-                      renderCustomSidebar={this.props.renderSidebar}
-                      showExitZenModeBtn={
-                        typeof this.props?.zenModeEnabled === "undefined" &&
-                        this.state.zenModeEnabled
-                      }
-                      libraryReturnUrl={this.props.libraryReturnUrl}
-                      UIOptions={this.props.UIOptions}
-                      focusContainer={this.focusContainer}
-                      library={this.library}
-                      id={this.id}
-                      onImageAction={this.onImageAction}
-                      renderWelcomeScreen={
-                        this.state.showWelcomeScreen &&
-                        this.state.activeTool.type === "selection" &&
-                        !this.scene.getElementsIncludingDeleted().length
-                      }
-                    >
-                      {this.props.children}
-                    </LayerUI>
-                    <div className="excalidraw-textEditorContainer" />
-                    <div className="excalidraw-contextMenuContainer" />
-                    {selectedElement.length === 1 &&
-                      !this.state.contextMenu &&
-                      this.state.showHyperlinkPopup && (
-                        <Hyperlink
-                          key={selectedElement[0].id}
-                          element={selectedElement[0]}
-                          setAppState={this.setAppState}
-                          onLinkOpen={this.props.onLinkOpen}
-                        />
-                      )}
-                    {this.state.toast !== null && (
-                      <Toast
-                        message={this.state.toast.message}
-                        onClose={() => this.setToast(null)}
-                        duration={this.state.toast.duration}
-                        closable={this.state.toast.closable}
-                      />
-                    )}
-                    {this.state.contextMenu && (
-                      <ContextMenu
-                        items={this.state.contextMenu.items}
-                        top={this.state.contextMenu.top}
-                        left={this.state.contextMenu.left}
-                        actionManager={this.actionManager}
-                      />
-                    )}
-                    <main>{this.renderCanvas()}</main>
-                  </ExcalidrawActionManagerContext.Provider>
                 </ExcalidrawElementsContext.Provider>{" "}
               </ExcalidrawAppStateContext.Provider>
             </ExcalidrawSetAppStateContext.Provider>

src/components/ClearCanvas.tsx

@@ -3,7 +3,7 @@ import { t } from "../i18n";
 import { TrashIcon } from "./icons";
 
 import ConfirmDialog from "./ConfirmDialog";
-import DropdownMenuItem from "./dropdownMenu/DropdownMenuItem";
+import MenuItem from "./MenuItem";
 
 const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
   const [showDialog, setShowDialog] = useState(false);
@@ -13,14 +13,12 @@ const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
 
   return (
     <>
-      <DropdownMenuItem
+      <MenuItem
+        label={t("buttons.clearReset")}
         icon={TrashIcon}
-        onSelect={toggleDialog}
+        onClick={toggleDialog}
         dataTestId="clear-canvas-button"
-        ariaLabel={t("buttons.clearReset")}
+      />
-      >
-        {t("buttons.clearReset")}
-      </DropdownMenuItem>
 
       {showDialog && (
         <ConfirmDialog

src/components/CollabButton.tsx

@@ -2,7 +2,7 @@ import { t } from "../i18n";
 import { UsersIcon } from "./icons";
 
 import "./CollabButton.scss";
-import DropdownMenuItem from "./dropdownMenu/DropdownMenuItem";
+import MenuItem from "./MenuItem";
 import clsx from "clsx";
 
 const CollabButton = ({
@@ -19,14 +19,13 @@ const CollabButton = ({
   return (
     <>
       {isInHamburgerMenu ? (
-        <DropdownMenuItem
+        <MenuItem
+          label={t("labels.liveCollaboration")}
           dataTestId="collab-button"
           icon={UsersIcon}
-          onSelect={onClick}
+          onClick={onClick}
-          ariaLabel={t("labels.liveCollaboration")}
+          isCollaborating={isCollaborating}
-        >
+        />
-          {t("labels.liveCollaboration")}
-        </DropdownMenuItem>
       ) : (
         <button
           className={clsx("collab-button", { active: isCollaborating })}

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,8 +23,9 @@ const ConfirmDialog = (props: Props) => {
     className = "",
     ...rest
   } = props;
-  const setAppState = useExcalidrawSetAppState();
+
-  const setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
+  const setIsMenuOpen = useSetAtom(isMenuOpenAtom);
+  const setIsDropdownOpen = useSetAtom(isDropdownOpenAtom);
 
   return (
     <Dialog
@@ -38,16 +39,16 @@ const ConfirmDialog = (props: Props) => {
         <DialogActionButton
           label={cancelText}
           onClick={() => {
-            setAppState({ openMenu: null });
+            setIsMenuOpen(false);
-            setIsLibraryMenuOpen(false);
+            setIsDropdownOpen(false);
             onCancel();
           }}
         />
         <DialogActionButton
           label={confirmText}
           onClick={() => {
-            setAppState({ openMenu: null });
+            setIsMenuOpen(false);
-            setIsLibraryMenuOpen(false);
+            setIsDropdownOpen(false);
             onConfirm();
           }}
           actionType="danger"

src/components/Dialog.tsx

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

src/components/HelpDialog.tsx

@@ -140,11 +140,11 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
             />
             <Shortcut
               label={t("toolBar.line")}
-              shortcuts={[KEYS.L, KEYS["6"]]}
+              shortcuts={[KEYS.P, KEYS["6"]]}
             />
             <Shortcut
               label={t("toolBar.freedraw")}
-              shortcuts={[KEYS.P, KEYS["7"]]}
+              shortcuts={["Shift + P", KEYS["7"]]}
             />
             <Shortcut
               label={t("toolBar.text")}

src/components/JSONExportDialog.tsx

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

src/components/LayerUI.scss

@@ -80,6 +80,16 @@
       }
     }
 
+    .layer-ui__wrapper__footer-center {
+      pointer-events: none;
+      & > * {
+        pointer-events: all;
+      }
+
+      display: flex;
+      width: 100%;
+      justify-content: flex-start;
+    }
     .layer-ui__wrapper__footer-left,
     .layer-ui__wrapper__footer-right,
     .disable-zen-mode--visible {

src/components/LayerUI.tsx

@@ -41,17 +41,26 @@ import "./LayerUI.scss";
 import "./Toolbar.scss";
 import { PenModeButton } from "./PenModeButton";
 import { trackEvent } from "../analytics";
-import { useDevice } from "../components/App";
+import { isMenuOpenAtom, useDevice } from "../components/App";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions/actionToggleStats";
 import Footer from "./footer/Footer";
-import { WelcomeScreenMenuArrow, WelcomeScreenTopToolbarArrow } from "./icons";
+import {
+  ExportImageIcon,
+  HamburgerMenuIcon,
+  WelcomeScreenMenuArrow,
+  WelcomeScreenTopToolbarArrow,
+} from "./icons";
+import { MenuLinks, Separator } from "./MenuUtils";
+import { useOutsideClickHook } from "../hooks/useOutsideClick";
 import WelcomeScreen from "./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 MainMenu from "./mainMenu/MainMenu";
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
+import MenuItem from "./MenuItem";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -94,6 +103,7 @@ const LayerUI = ({
   showExitZenModeBtn,
   isCollaborating,
   renderTopRightUI,
+
   renderCustomStats,
   renderCustomSidebar,
   libraryReturnUrl,
@@ -123,7 +133,6 @@ const LayerUI = ({
         actionManager={actionManager}
         exportOpts={UIOptions.canvasActions.export}
         canvas={canvas}
-        setAppState={setAppState}
       />
     );
   };
@@ -177,35 +186,9 @@ const LayerUI = ({
     );
   };
 
-  const renderMenu = () => {
+  const [isMenuOpen, setIsMenuOpen] = useAtom(isMenuOpenAtom);
-    return (
+  const menuRef = useOutsideClickHook(() => setIsMenuOpen(false));
-      childrenComponents.Menu || (
+
-        <MainMenu>
-          <MainMenu.DefaultItems.LoadScene />
-          <MainMenu.DefaultItems.SaveToActiveFile />
-          {UIOptions.canvasActions.export && <MainMenu.DefaultItems.Export />}
-          {UIOptions.canvasActions.saveAsImage && (
-            <MainMenu.DefaultItems.SaveAsImage />
-          )}
-          {onCollabButtonClick && (
-            <MainMenu.DefaultItems.LiveCollaboration
-              onSelect={onCollabButtonClick}
-              isCollaborating={isCollaborating}
-            />
-          )}
-          <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
@@ -216,7 +199,87 @@ const LayerUI = ({
           <div>{t("welcomeScreen.menuHints")}</div>
         </div>
       </WelcomeScreenDecor>
-      {renderMenu()}
+
+      <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>
+      )}
     </div>
   );
 
@@ -347,7 +410,10 @@ const LayerUI = ({
               },
             )}
           >
-            <UserList collaborators={appState.collaborators} />
+            <UserList
+              collaborators={appState.collaborators}
+              actionManager={actionManager}
+            />
             {onCollabButtonClick && (
               <CollabButton
                 isInHamburgerMenu={false}
@@ -400,7 +466,6 @@ const LayerUI = ({
         />
       )}
       {renderImageExportDialog()}
-      {renderJSONExportDialog()}
       {appState.pasteDialog.shown && (
         <PasteChartDialog
           setAppState={setAppState}
@@ -432,7 +497,6 @@ const LayerUI = ({
           renderCustomStats={renderCustomStats}
           renderSidebars={renderSidebars}
           device={device}
-          renderMenu={renderMenu}
         />
       )}
 
@@ -461,8 +525,9 @@ const LayerUI = ({
               appState={appState}
               actionManager={actionManager}
               showExitZenModeBtn={showExitZenModeBtn}
-              footerCenter={childrenComponents.FooterCenter}
+            >
-            />
+              {childrenComponents.FooterCenter}
+            </Footer>
 
             {appState.showStats && (
               <Stats

src/components/LibraryMenu.scss

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

src/components/Menu.scss

@@ -0,0 +1,85 @@
+@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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -11,13 +11,18 @@ 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;
@@ -41,14 +46,16 @@ type MobileMenuProps = {
   renderSidebars: () => JSX.Element | null;
   device: Device;
   renderWelcomeScreen?: boolean;
-  renderMenu: () => React.ReactNode;
 };
 
 export const MobileMenu = ({
   appState,
   elements,
   actionManager,
+  renderJSONExportDialog,
+  renderImageExportDialog,
   setAppState,
+  onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   canvas,
@@ -59,7 +66,6 @@ export const MobileMenu = ({
   renderSidebars,
   device,
   renderWelcomeScreen,
-  renderMenu,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
@@ -141,12 +147,16 @@ export const MobileMenu = ({
 
   const renderAppToolbar = () => {
     if (appState.viewModeEnabled) {
-      return <div className="App-toolbar-content">{renderMenu()}</div>;
+      return (
+        <div className="App-toolbar-content">
+          {actionManager.renderAction("toggleCanvasMenu")}
+        </div>
+      );
     }
 
     return (
       <div className="App-toolbar-content">
-        {renderMenu()}
+        {actionManager.renderAction("toggleCanvasMenu")}
         {actionManager.renderAction("toggleEditMenu")}
         {actionManager.renderAction("undo")}
         {actionManager.renderAction("redo")}
@@ -158,6 +168,58 @@ 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()}
@@ -182,9 +244,27 @@ export const MobileMenu = ({
         }}
       >
         <Island padding={0}>
-          {appState.openMenu === "shape" &&
+          {appState.openMenu === "canvas" ? (
-          !appState.viewModeEnabled &&
+            <Section className="App-mobile-menu" heading="canvasActions">
-          showSelectedShapeActions(appState, elements) ? (
+              <div className="panelColumn">
+                <Stack.Col gap={2}>
+                  {renderCanvasActions()}
+                  {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) ? (
             <Section className="App-mobile-menu" heading="selectedShapeActions">
               <SelectedShapeActions
                 appState={appState}

src/components/Modal.scss

@@ -3,7 +3,7 @@
 .excalidraw {
   &.excalidraw-modal-container {
     position: absolute;
-    z-index: 9999;
+    z-index: 10;
   }
 
   .Modal {

src/components/Sidebar/Sidebar.scss

@@ -3,6 +3,24 @@
 
 .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.tsx

@@ -4,16 +4,16 @@ import React from "react";
 import clsx from "clsx";
 import { AppState, Collaborator } from "../types";
 import { Tooltip } from "./Tooltip";
-import { useExcalidrawActionManager } from "./App";
+import { ActionManager } from "../actions/manager";
 
 export const UserList: React.FC<{
   className?: string;
   mobile?: boolean;
   collaborators: AppState["collaborators"];
-}> = ({ className, mobile, collaborators }) => {
+  actionManager: ActionManager;
-  const actionManager = useExcalidrawActionManager();
+}> = ({ className, mobile, collaborators, actionManager }) => {
-
   const uniqueCollaborators = new Map<string, Collaborator>();
+
   collaborators.forEach((collaborator, socketId) => {
     uniqueCollaborators.set(
       // filter on user id, else fall back on unique socketId
@@ -44,6 +44,26 @@ 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,10 +1,18 @@
+import { useAtom } from "jotai";
 import { actionLoadScene, actionShortcuts } from "../actions";
 import { ActionManager } from "../actions/manager";
 import { getShortcutFromShortcutName } from "../actions/shortcuts";
 import { isExcalidrawPlusSignedUser } from "../constants";
+import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab";
 import { t } from "../i18n";
 import { AppState } from "../types";
-import { ExcalLogo, HelpIcon, LoadIcon, PlusPromoIcon } from "./icons";
+import {
+  ExcalLogo,
+  HelpIcon,
+  LoadIcon,
+  PlusPromoIcon,
+  UsersIcon,
+} from "./icons";
 import "./WelcomeScreen.scss";
 
 const WelcomeScreenItem = ({
@@ -56,6 +64,8 @@ const WelcomeScreen = ({
   appState: AppState;
   actionManager: ActionManager;
 }) => {
+  const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
+
   let subheadingJSX;
 
   if (isExcalidrawPlusSignedUser) {
@@ -99,6 +109,12 @@ const WelcomeScreen = ({
             icon={LoadIcon}
           />
         )}
+        <WelcomeScreenItem
+          label={t("labels.liveCollaboration")}
+          shortcut={null}
+          onClick={() => setCollabDialogShown(true)}
+          icon={UsersIcon}
+        />
         <WelcomeScreenItem
           onClick={() => actionManager.executeAction(actionShortcuts)}
           label={t("helpDialog.title")}

src/components/dropdownMenu/DropdownMenu.scss

@@ -1,127 +0,0 @@
-@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);
-        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

@@ -1,43 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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,
-  dataTestId,
-  shortcut,
-  className,
-  style,
-  ariaLabel,
-}: {
-  icon?: JSX.Element;
-  onSelect: () => void;
-  children: React.ReactNode;
-  dataTestId?: string;
-  shortcut?: string;
-  className?: string;
-  style?: React.CSSProperties;
-  ariaLabel?: string;
-}) => {
-  return (
-    <button
-      aria-label={ariaLabel}
-      onClick={onSelect}
-      data-testid={dataTestId}
-      title={ariaLabel}
-      type="button"
-      className={getDrodownMenuItemClassName(className)}
-      style={style}
-    >
-      <MenuItemContent icon={icon} shortcut={shortcut}>
-        {children}
-      </MenuItemContent>
-    </button>
-  );
-};
-
-export default DropdownMenuItem;
-DropdownMenuItem.displayName = "DropdownMenuItem";

src/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-const DropdownMenuItemCustom = ({
-  children,
-  className = "",
-  style,
-  dataTestId,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-  dataTestId?: string;
-}) => {
-  return (
-    <div
-      className={`dropdown-menu-item-base dropdown-menu-item-custom ${className}`.trim()}
-      style={style}
-      data-testid={dataTestId}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default DropdownMenuItemCustom;

src/components/dropdownMenu/DropdownMenuItemLink.tsx

@@ -1,42 +0,0 @@
-import MenuItemContent from "./DropdownMenuItemContent";
-import React from "react";
-import { getDrodownMenuItemClassName } from "./DropdownMenuItem";
-const DropdownMenuItemLink = ({
-  icon,
-  dataTestId,
-  shortcut,
-  href,
-  children,
-  className = "",
-  style,
-  ariaLabel,
-}: {
-  icon?: JSX.Element;
-  children: React.ReactNode;
-  dataTestId?: string;
-  shortcut?: string;
-  className?: string;
-  href: string;
-  style?: React.CSSProperties;
-  ariaLabel?: string;
-}) => {
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noreferrer"
-      className={getDrodownMenuItemClassName(className)}
-      style={style}
-      data-testid={dataTestId}
-      title={ariaLabel}
-      aria-label={ariaLabel}
-    >
-      <MenuItemContent icon={icon} shortcut={shortcut}>
-        {children}
-      </MenuItemContent>
-    </a>
-  );
-};
-
-export default DropdownMenuItemLink;
-DropdownMenuItemLink.displayName = "DropdownMenuItemLink";

src/components/dropdownMenu/DropdownMenuSeparator.tsx

@@ -1,14 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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,7 +1,7 @@
 import clsx from "clsx";
 import { ActionManager } from "../../actions/manager";
 import { t } from "../../i18n";
-import { AppState, UIChildrenComponents } from "../../types";
+import { AppState } from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
@@ -13,19 +13,20 @@ import { WelcomeScreenHelpArrow } from "../icons";
 import { Section } from "../Section";
 import Stack from "../Stack";
 import WelcomeScreenDecor from "../WelcomeScreenDecor";
+import FooterCenter from "./FooterCenter";
 
 const Footer = ({
   appState,
   actionManager,
   showExitZenModeBtn,
   renderWelcomeScreen,
-  footerCenter,
+  children,
 }: {
   appState: AppState;
   actionManager: ActionManager;
   showExitZenModeBtn: boolean;
   renderWelcomeScreen: boolean;
-  footerCenter: UIChildrenComponents["FooterCenter"];
+  children?: React.ReactNode;
 }) => {
   const device = useDevice();
   const showFinalize =
@@ -70,7 +71,7 @@ const Footer = ({
           </Section>
         </Stack.Col>
       </div>
-      {footerCenter}
+      <FooterCenter>{children}</FooterCenter>
       <div
         className={clsx("layer-ui__wrapper__footer-right zen-mode-transition", {
           "transition-right disable-pointerEvents": appState.zenModeEnabled,

src/components/footer/FooterCenter.scss

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

src/components/footer/FooterCenter.tsx

@@ -1,12 +1,11 @@
 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", {
+      className={clsx("layer-ui__wrapper__footer-center zen-mode-transition", {
         "layer-ui__wrapper__footer-left--transition-bottom":
           appState.zenModeEnabled,
       })}

src/components/mainMenu/DefaultItems.tsx

@@ -1,174 +0,0 @@
-import clsx from "clsx";
-import { getShortcutFromShortcutName } from "../../actions/shortcuts";
-import { t } from "../../i18n";
-import {
-  useExcalidrawAppState,
-  useExcalidrawSetAppState,
-  useExcalidrawActionManager,
-} from "../App";
-import { ExportIcon, ExportImageIcon, UsersIcon } from "../icons";
-import { GithubIcon, DiscordIcon, TwitterIcon } from "../icons";
-import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
-import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
-
-export const LoadScene = () => {
-  const appState = useExcalidrawAppState();
-  const actionManager = useExcalidrawActionManager();
-  if (appState.viewModeEnabled) {
-    return null;
-  }
-  return actionManager.renderAction("loadScene");
-};
-LoadScene.displayName = "LoadScene";
-
-export const SaveToActiveFile = () => {
-  const appState = useExcalidrawAppState();
-  const actionManager = useExcalidrawActionManager();
-  if (!appState.fileHandle) {
-    return null;
-  }
-  return actionManager.renderAction("saveToActiveFile");
-};
-SaveToActiveFile.displayName = "SaveToActiveFile";
-
-export const SaveAsImage = () => {
-  const setAppState = useExcalidrawSetAppState();
-  // Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-  return (
-    <DropdownMenuItem
-      icon={ExportImageIcon}
-      dataTestId="image-export-button"
-      onSelect={() => setAppState({ openDialog: "imageExport" })}
-      shortcut={getShortcutFromShortcutName("imageExport")}
-      ariaLabel={t("buttons.exportImage")}
-    >
-      {t("buttons.exportImage")}
-    </DropdownMenuItem>
-  );
-};
-SaveAsImage.displayName = "SaveAsImage";
-
-export const Help = () => {
-  // Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-
-  const actionManager = useExcalidrawActionManager();
-  return actionManager.renderAction("toggleShortcuts", undefined, true);
-};
-Help.displayName = "Help";
-
-export const ClearCanvas = () => {
-  const appState = useExcalidrawAppState();
-  const actionManager = useExcalidrawActionManager();
-
-  if (appState.viewModeEnabled) {
-    return null;
-  }
-  return actionManager.renderAction("clearCanvas");
-};
-ClearCanvas.displayName = "ClearCanvas";
-
-export const ToggleTheme = () => {
-  // Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-  const actionManager = useExcalidrawActionManager();
-  return actionManager.renderAction("toggleTheme");
-};
-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 = () => {
-  // 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" });
-      }}
-      dataTestId="json-export-button"
-      ariaLabel={t("buttons.export")}
-    >
-      {t("buttons.export")}
-    </DropdownMenuItem>
-  );
-};
-Export.displayName = "Export";
-
-export const Socials = () => (
-  <>
-    <DropdownMenuItemLink
-      icon={GithubIcon}
-      href="https://github.com/excalidraw/excalidraw"
-      ariaLabel="GitHub"
-    >
-      GitHub
-    </DropdownMenuItemLink>
-    <DropdownMenuItemLink
-      icon={DiscordIcon}
-      href="https://discord.gg/UexuTaE"
-      ariaLabel="Discord"
-    >
-      Discord
-    </DropdownMenuItemLink>
-    <DropdownMenuItemLink
-      icon={TwitterIcon}
-      href="https://twitter.com/excalidraw"
-      ariaLabel="Twitter"
-    >
-      Twitter
-    </DropdownMenuItemLink>
-  </>
-);
-Socials.displayName = "Socials";
-
-export const LiveCollaboration = ({
-  onSelect,
-  isCollaborating,
-}: {
-  onSelect: () => void;
-  isCollaborating: boolean;
-}) => {
-  // Hack until we tie "t" to lang state
-  // eslint-disable-next-line
-  const appState = useExcalidrawAppState();
-  return (
-    <DropdownMenuItem
-      dataTestId="collab-button"
-      icon={UsersIcon}
-      className={clsx({
-        "active-collab": isCollaborating,
-      })}
-      onSelect={onSelect}
-    >
-      {t("labels.liveCollaboration")}
-    </DropdownMenuItem>
-  );
-};
-
-LiveCollaboration.displayName = "LiveCollaboration";

src/components/mainMenu/MainMenu.tsx

@@ -1,56 +0,0 @@
-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/css/styles.scss

@@ -569,20 +569,6 @@
       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/excalidraw-app/collab/Collab.tsx

@@ -263,6 +263,13 @@ class Collab extends PureComponent<Props, CollabState> {
       ),
     );
 
+    if (this.portal.socket && this.fallbackInitializationHandler) {
+      this.portal.socket.off(
+        "connect_error",
+        this.fallbackInitializationHandler,
+      );
+    }
+
     if (!keepRemoteState) {
       LocalData.fileStorage.reset();
       this.destroySocketClient();
@@ -358,6 +365,8 @@ class Collab extends PureComponent<Props, CollabState> {
     }
   };
 
+  private fallbackInitializationHandler: null | (() => any) = null;
+
   startCollaboration = async (
     existingRoomLinkData: null | { roomId: string; roomKey: string },
   ): Promise<ImportedDataState | null> => {
@@ -396,6 +405,7 @@ class Collab extends PureComponent<Props, CollabState> {
         scenePromise.resolve(scene);
       });
     };
+    this.fallbackInitializationHandler = fallbackInitializationHandler;
 
     try {
       const socketServerData = await getCollabServer();
@@ -410,27 +420,7 @@ class Collab extends PureComponent<Props, CollabState> {
         roomKey,
       );
 
-      this.portal.socket.on("disconnect", (reason) => {
+      this.portal.socket.once("connect_error", fallbackInitializationHandler);
-        // reason `io server disconnect` probably means CORS issue
-        console.warn(
-          `${
-            this.portal.socketInitialized ? "initialized" : "uninitialized"
-          } socket disconnected from server: ${reason}`,
-        );
-        this.setState({
-          errorMessage: this.portal.socketInitialized
-            ? t("errors.socketDisconnected")
-            : t("errors.socketConnectionError"),
-        });
-        fallbackInitializationHandler();
-      });
-
-      this.portal.socket.on("connect_error", () => {
-        fallbackInitializationHandler();
-        this.setState({
-          errorMessage: t("errors.socketConnectionError"),
-        });
-      });
     } catch (error: any) {
       console.error(error);
       this.setState({ errorMessage: error.message });
@@ -457,7 +447,6 @@ class Collab extends PureComponent<Props, CollabState> {
       this.saveCollabRoomToFirebase(getSyncableElements(elements));
     }
 
-    clearTimeout(this.socketInitializationTimer!);
     // fallback in case you're not alone in the room but still don't receive
     // initial SCENE_INIT message
     this.socketInitializationTimer = window.setTimeout(
@@ -568,12 +557,12 @@ class Collab extends PureComponent<Props, CollabState> {
       }
     | { fetchScene: false; roomLinkData?: null }) => {
     clearTimeout(this.socketInitializationTimer!);
-
+    if (this.portal.socket && this.fallbackInitializationHandler) {
-    if (!this.portal.socket || this.portal.socketInitialized) {
+      this.portal.socket.off(
-      return null;
+        "connect_error",
+        this.fallbackInitializationHandler,
+      );
     }
-    this.portal.socketInitialized = true;
-
     if (fetchScene && roomLinkData && this.portal.socket) {
       this.excalidrawAPI.resetScene();
 
@@ -596,7 +585,11 @@ class Collab extends PureComponent<Props, CollabState> {
       } catch (error: any) {
         // log the error and move on. other peers will sync us the scene.
         console.error(error);
+      } finally {
+        this.portal.socketInitialized = true;
       }
+    } else {
+      this.portal.socketInitialized = true;
     }
     return null;
   };

src/excalidraw-app/collab/Portal.tsx

@@ -19,11 +19,10 @@ import { newElementWith } from "../../element/mutateElement";
 import { BroadcastedExcalidrawElement } from "./reconciliation";
 import { encryptData } from "../../data/encryption";
 import { PRECEDING_ELEMENT_KEY } from "../../constants";
-import { Socket } from "socket.io-client";
 
 class Portal {
   collab: TCollabClass;
-  socket: Socket | null = null;
+  socket: SocketIOClient.Socket | null = null;
   socketInitialized: boolean = false; // we don't want the socket to emit any updates until it is fully initialized
   roomId: string | null = null;
   roomKey: string | null = null;
@@ -33,7 +32,7 @@ class Portal {
     this.collab = collab;
   }
 
-  open(socket: Socket, id: string, key: string) {
+  open(socket: SocketIOClient.Socket, id: string, key: string) {
     this.socket = socket;
     this.roomId = id;
     this.roomKey = key;
@@ -64,7 +63,6 @@ class Portal {
       return;
     }
     this.queueFileUpload.flush();
-    this.socket.off();
     this.socket.close();
     this.socket = null;
     this.roomId = null;
@@ -144,12 +142,7 @@ class Portal {
     // periodically we'll resync the whole thing to make sure no one diverges
     // due to a dropped message (server goes down etc).
     const syncableElements = allElements.reduce(
-      (
+      (acc, element: BroadcastedExcalidrawElement, idx, elements) => {
-        acc: BroadcastedExcalidrawElement[],
-        element: BroadcastedExcalidrawElement,
-        idx,
-        elements,
-      ) => {
         if (
           (syncAll ||
             !this.broadcastedElementVersions.has(element.id) ||
@@ -165,7 +158,7 @@ class Portal {
         }
         return acc;
       },
-      [],
+      [] as BroadcastedExcalidrawElement[],
     );
 
     const data: SocketUpdateDataSource[typeof updateType] = {

src/excalidraw-app/components/LanguageList.tsx

@@ -8,21 +8,23 @@ export const LanguageList = ({ style }: { style?: React.CSSProperties }) => {
   const [langCode, setLangCode] = useAtom(langCodeAtom);
 
   return (
-    <select
+    <React.Fragment>
-      className="dropdown-select dropdown-select__language"
+      <select
-      onChange={({ target }) => setLangCode(target.value)}
+        className="dropdown-select dropdown-select__language"
-      value={langCode}
+        onChange={({ target }) => setLangCode(target.value)}
-      aria-label={i18n.t("buttons.selectLanguage")}
+        value={langCode}
-      style={style}
+        aria-label={i18n.t("buttons.selectLanguage")}
-    >
+        style={style}
-      <option key={i18n.defaultLang.code} value={i18n.defaultLang.code}>
+      >
-        {i18n.defaultLang.label}
+        <option key={i18n.defaultLang.code} value={i18n.defaultLang.code}>
-      </option>
+          {i18n.defaultLang.label}
-      {languages.map((lang) => (
-        <option key={lang.code} value={lang.code}>
-          {lang.label}
         </option>
-      ))}
+        {languages.map((lang) => (
-    </select>
+          <option key={lang.code} value={lang.code}>
+            {lang.label}
+          </option>
+        ))}
+      </select>
+    </React.Fragment>
   );
 };

src/excalidraw-app/data/firebase.ts

@@ -14,7 +14,6 @@ import { encryptData, decryptData } from "../../data/encryption";
 import { MIME_TYPES } from "../../constants";
 import { reconcileElements } from "../collab/reconciliation";
 import { getSyncableElements, SyncableExcalidrawElement } from ".";
-import { Socket } from "socket.io-client";
 
 // private
 // -----------------------------------------------------------------------------
@@ -130,12 +129,12 @@ const decryptElements = async (
 };
 
 class FirebaseSceneVersionCache {
-  private static cache = new WeakMap<Socket, number>();
+  private static cache = new WeakMap<SocketIOClient.Socket, number>();
-  static get = (socket: Socket) => {
+  static get = (socket: SocketIOClient.Socket) => {
     return FirebaseSceneVersionCache.cache.get(socket);
   };
   static set = (
-    socket: Socket,
+    socket: SocketIOClient.Socket,
     elements: readonly SyncableExcalidrawElement[],
   ) => {
     FirebaseSceneVersionCache.cache.set(socket, getSceneVersion(elements));
@@ -277,7 +276,7 @@ export const saveToFirebase = async (
 export const loadFromFirebase = async (
   roomId: string,
   roomKey: string,
-  socket: Socket | null,
+  socket: SocketIOClient.Socket | null,
 ): Promise<readonly ExcalidrawElement[] | null> => {
   const firebase = await loadFirestore();
   const db = firebase.firestore();

src/excalidraw-app/index.scss

@@ -4,7 +4,7 @@
   &.theme--dark {
     --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
   }
-  .footer-center {
+  .layer-ui__wrapper .layer-ui__wrapper__footer-center {
     justify-content: flex-end;
     margin-top: auto;
     margin-bottom: auto;
@@ -24,29 +24,7 @@
       height: 1.2rem;
     }
   }
-
-  .dropdown-menu-container {
-    .dropdown-menu-item {
-      &.active-collab {
-        background-color: #ecfdf5;
-        color: #064e3c;
-      }
-      &.ExcalidrawPlus {
-        color: var(--color-promo);
-      }
-    }
-  }
-
-  &.theme--dark {
-    .dropdown-menu-item {
-      &.active-collab {
-        background-color: #064e3c;
-        color: #ecfdf5;
-      }
-    }
-  }
 }
-
 .excalidraw-app.is-collaborating {
   [data-testid="clear-canvas-button"] {
     display: none;

src/excalidraw-app/index.tsx

@@ -21,12 +21,7 @@ import {
 } from "../element/types";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import {
+import { Excalidraw, defaultLang, Footer } from "../packages/excalidraw/index";
-  Excalidraw,
-  defaultLang,
-  Footer,
-  MainMenu,
-} from "../packages/excalidraw/index";
 import {
   AppState,
   LibraryItems,
@@ -84,11 +79,8 @@ import { reconcileElements } from "./collab/reconciliation";
 import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
 import { EncryptedIcon } from "./components/EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./components/ExcalidrawPlusAppLink";
-import { LanguageList } from "./components/LanguageList";
-import { PlusPromoIcon } from "../components/icons";
 
 polyfill();
-
 window.EXCALIDRAW_THROTTLE_RENDER = true;
 
 const languageDetector = new LanguageDetector();
@@ -237,6 +229,7 @@ export const langCodeAtom = atom(
 const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const [langCode, setLangCode] = useAtom(langCodeAtom);
+
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -601,39 +594,6 @@ const ExcalidrawWrapper = () => {
     localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY, serializedItems);
   };
 
-  const renderMenu = () => {
-    return (
-      <MainMenu>
-        <MainMenu.DefaultItems.LoadScene />
-        <MainMenu.DefaultItems.SaveToActiveFile />
-        <MainMenu.DefaultItems.Export />
-        <MainMenu.DefaultItems.SaveAsImage />
-        <MainMenu.DefaultItems.LiveCollaboration
-          isCollaborating={isCollaborating}
-          onSelect={() => setCollabDialogShown(true)}
-        />
-
-        <MainMenu.DefaultItems.Help />
-        <MainMenu.DefaultItems.ClearCanvas />
-        <MainMenu.Separator />
-        <MainMenu.ItemLink
-          icon={PlusPromoIcon}
-          href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=hamburger"
-          className="ExcalidrawPlus"
-        >
-          Excalidraw+
-        </MainMenu.ItemLink>
-        <MainMenu.DefaultItems.Socials />
-        <MainMenu.Separator />
-        <MainMenu.DefaultItems.ToggleTheme />
-        <MainMenu.ItemCustom>
-          <LanguageList style={{ width: "100%" }} />
-        </MainMenu.ItemCustom>
-        <MainMenu.DefaultItems.ChangeCanvasBackground />
-      </MainMenu>
-    );
-  };
-
   return (
     <div
       style={{ height: "100%" }}
@@ -680,7 +640,6 @@ const ExcalidrawWrapper = () => {
         autoFocus={true}
         theme={theme}
       >
-        {renderMenu()}
         <Footer>
           <div style={{ display: "flex", gap: ".5rem", alignItems: "center" }}>
             <ExcalidrawPlusAppLink />

src/locales/en.json

@@ -203,8 +203,6 @@
     "invalidSVGString": "Invalid SVG.",
     "cannotResolveCollabServer": "Couldn't connect to the collab server. Please reload the page and try again.",
     "importLibraryError": "Couldn't load library",
-    "socketDisconnected": "You've been disconnected from the server",
-    "socketConnectionError": "Couldn't connect to the server",
     "collabSaveFailed": "Couldn't save to the backend database. If problems persist, you should save your file locally to ensure you don't lose your work.",
     "collabSaveFailed_sizeExceeded": "Couldn't save to the backend database, the canvas seems to be too big. You should save the file locally to ensure you don't lose your work."
   },

src/packages/excalidraw/CHANGELOG.md

@@ -15,8 +15,6 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
-- Expose component API for the Excalidraw main menu [#6034](https://github.com/excalidraw/excalidraw/pull/6034), You can read more about its usage [here](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#MainMenu)
-
 - Render Footer as a component instead of render prop [#5970](https://github.com/excalidraw/excalidraw/pull/5970). You can read more about its usage [here](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#Footer)
 
 #### BREAKING CHANGE

src/packages/excalidraw/README.md

@@ -405,195 +405,6 @@ const App = () => {
 };
 ```
 
-This will only for `Desktop` devices.
-
-For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useDevice`](#useDevice) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
-
-```js
-import { useDevice, Footer } from "@excalidraw/excalidraw";
-
-const MobileFooter = ({
-}) => {
-  const device = useDevice();
-  if (device.isMobile) {
-    return (
-      <Footer>
-       <button
-        className="custom-footer"
-        onClick={() => alert("This is custom footer in mobile menu")}
-      >
-        {" "}
-        custom footer{" "}
-      </button>
-      </Footer>
-    );
-  }
-  return null;
-
-};
-const App = () => {
-  <Excalidraw>
-    <MainMenu>
-      <MainMenu.Item onSelect={() => window.alert("Item1")}> Item1 </MainMenu.Item>
-      <MainMenu.Item onSelect={() => window.alert("Item2")}> Item 2 </>
-      <MobileFooter/>
-    </MainMenu>
-  </Excalidraw>
-}
-
-```
-
-You can visit the[ example](https://ehlz3.csb.app/) for working demo.
-
-#### MainMenu
-
-By default Excalidraw will render the `MainMenu` with default options. If you want to customise the `MainMenu`, you can pass the `MainMenu` component with the list options. You can visit [codesandbox example](https://ehlz3.csb.app/) for a working demo.
-
-**Usage**
-
-```js
-import { MainMenu } from "@excalidraw/excalidraw";
-const App = () => {
-  <Excalidraw>
-    <MainMenu>
-      <MainMenu.Item onSelect={() => window.alert("Item1")}> Item1 </MainMenu.Item>
-      <MainMenu.Item onSelect={() => window.alert("Item2")}> Item 2 </>
-    </MainMenu>
-  </Excalidraw>
-}
-```
-
-**MainMenu**
-
-This is the `MainMenu` component which you need to import to render the menu with custom options.
-
-**MainMenu.Item**
-
-To render an item, its recommended to use `MainMenu.Item`.
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `onSelect` | `Function` | Yes | `undefined` | The handler is triggered when the item is selected. |
-| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
-| `icon` | `JSX.Element` | No | `undefined` | The icon used in the menu item |
-| `shortcut` | `string` | No | `undefined` | The shortcut to be shown for the menu item |
-| `className` | `string` | No | "" | The class names to be added to the menu item |
-| `style` | `React.CSSProperties` | No | `undefined` | The inline styles to be added to the menu item |
-| `ariaLabel` | `string` | `undefined` | No | The `aria-label` to be added to the item for accessibility |
-| `dataTestId` | `string` | `undefined` | No | The `data-testid` to be added to the item. |
-
-**MainMenu.ItemLink**
-
-To render an item as a link, its recommended to use `MainMenu.ItemLink`.
-
-**Usage**
-
-```js
-import { MainMenu } from "@excalidraw/excalidraw";
-const App = () => {
-  <Excalidraw>
-    <MainMenu>
-      <MainMenu.ItemLink href="https://google.com">Google</MainMenu.ItemLink>
-      <MainMenu.ItemLink href="https://excalidraw.com">
-        Excalidraw
-      </MainMenu.ItemLink>
-    </MainMenu>
-  </Excalidraw>;
-};
-```
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `href` | `string` | Yes | `undefined` | The `href` attribute to be added to the `anchor` element. |
-| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
-| `icon` | `JSX.Element` | No | `undefined` | The icon used in the menu item |
-| `shortcut` | `string` | No | `undefined` | The shortcut to be shown for the menu item |
-| `className` | `string` | No | "" | The class names to be added to the menu item |
-| `style` | `React.CSSProperties` | No | `undefined` | The inline styles to be added to the menu item |
-| `ariaLabel` | `string` | No | `undefined` | The `aria-label` to be added to the item for accessibility |
-| `dataTestId` | `string` | No | `undefined` | The `data-testid` to be added to the item. |
-
-**MainMenu.ItemCustom**
-
-To render a custom item, you can use `MainMenu.ItemCustom`.
-
-**Usage**
-
-```js
-import { MainMenu } from "@excalidraw/excalidraw";
-const App = () => {
-  <Excalidraw>
-    <MainMenu>
-      <MainMenu.ItemCustom>
-        <button
-          style={{ height: "2rem" }}
-          onClick={() => window.alert("custom menu item")}
-        >
-          {" "}
-          custom item
-        </button>
-      </MainMenu.ItemCustom>
-    </MainMenu>
-  </Excalidraw>;
-};
-```
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `children` | `React.ReactNode` | Yes | `undefined` | The content of the menu item |
-| `className` | `string` | No | "" | The class names to be added to the menu item |
-| `style` | `React.CSSProperties` | No | `undefined` | The inline styles to be added to the menu item |
-| `dataTestId` | `string` | No | `undefined` | The `data-testid` to be added to the item. |
-
-**MainMenu.DefaultItems**
-
-For the items which are shown in the menu in [excalidraw.com](https://excalidraw.com), you can use `MainMenu.DefaultItems`
-
-```js
-import { MainMenu } from "@excalidraw/excalidraw";
-const App = () => {
-  <Excalidraw>
-    <MainMenu>
-      <MainMenu.DefaultItems.Socials/>
-      <MainMenu.DefaultItems.Export/>
-      <MainMenu.Item onSelect={() => window.alert("Item1")}> Item1 </MainMenu.Item>
-      <MainMenu.Item onSelect={() => window.alert("Item2")}> Item 2 </>
-    </MainMenu>
-  </Excalidraw>
-}
-```
-
-Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/src/components/mainMenu/DefaultItems.tsx) of the default items.
-
-**MainMenu.Group**
-
-To Group item in the main menu, you can use `MainMenu.Group`
-
-```js
-import { MainMenu } from "@excalidraw/excalidraw";
-const App = () => {
-  <Excalidraw>
-    <MainMenu>
-      <MainMenu.Group title="Excalidraw items">
-        <MainMenu.DefaultItems.Socials/>
-        <MainMenu.DefaultItems.Export/>
-      </MainMenu.Group>
-      <MainMenu.Group title="custom items">
-        <MainMenu.Item onSelect={() => window.alert("Item1")}> Item1 </MainMenu.Item>
-        <MainMenu.Item onSelect={() => window.alert("Item2")}> Item 2 </>
-      </MainMenu.Group>
-    </MainMenu>
-  </Excalidraw>
-}
-```
-
-| Prop | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `children ` | `React.ReactNode` | Yes | `undefined` | The content of the `Menu Group` |
-| `title` | `string` | No | `undefined` | The `title` for the grouped items |
-| `className` | `string` | No | "" | The `classname` to be added to the group |
-| `style` | `React.CSsSProperties` | No | `undefined` | The inline `styles` to be added to the group |
-
 ### Props
 
 | Name | Type | Default | Description |
@@ -1558,53 +1369,6 @@ viewportCoordsToSceneCoords({clientX: number, clientY: number}, appState: <a hre
 
 This function returns equivalent scene coords for the provided viewport coords in params.
 
-#### useDevice
-
-This hook can be used to check the type of device which is being used. It can only be used inside the `children` of `Excalidraw` component
-
-```js
-import { useDevice, Footer } from "@excalidraw/excalidraw";
-
-const MobileFooter = ({
-}) => {
-  const device = useDevice();
-  if (device.isMobile) {
-    return (
-      <Footer>
-       <button
-        className="custom-footer"
-        onClick={() => alert("This is custom footer in mobile menu")}
-      >
-        {" "}
-        custom footer{" "}
-      </button>
-      </Footer>
-    );
-  }
-  return null;
-
-};
-const App = () => {
-  <Excalidraw>
-    <MainMenu>
-      <MainMenu.Item> Item1 </MainMenu.Item>
-      <MainMenu.Item> Item 2 </>
-      <MobileFooter/>
-    </MainMenu>
-  </Excalidraw>
-}
-
-```
-
-The `device` has the following `attributes`
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `isSmScreen` | `boolean` | Set to `true` when the device small screen is small (Width < `640px` ) |
-| `isMobile` | `boolean` | Set to `true` when the device is `mobile` |
-| `isTouchScreen` | `boolean` | Set to `true` for `touch` devices |
-| `canDeviceFitSidebar` | `boolean` | Implies whether there is enough space to fit the `sidebar` |
-
 ### Exported constants
 
 #### `FONT_FAMILY`

src/packages/excalidraw/example/App.scss

@@ -73,4 +73,9 @@
   .custom-element {
     padding: 0.1rem;
   }
+
+  &.excalidraw-container .layer-ui__wrapper .layer-ui__wrapper__footer-center {
+    // Remove once we stop importing langauge list from excalidraw app
+    justify-content: flex-start;
+  }
 }

src/packages/excalidraw/example/App.tsx

@@ -28,8 +28,6 @@ import {
 } from "../../../types";
 import { NonDeletedExcalidrawElement } from "../../../element/types";
 import { ImportedLibraryData } from "../../../data/types";
-import CustomFooter from "./CustomFooter";
-import MobileFooter from "./MobileFooter";
 
 declare global {
   interface Window {
@@ -71,9 +69,24 @@ const {
   restoreElements,
   Sidebar,
   Footer,
-  MainMenu,
 } = window.ExcalidrawLib;
 
+const COMMENT_SVG = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-message-circle"
+  >
+    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
+  </svg>
+);
 const COMMENT_ICON_DIMENSION = 32;
 const COMMENT_INPUT_HEIGHT = 50;
 const COMMENT_INPUT_WIDTH = 150;
@@ -330,7 +343,6 @@ export default function App() {
       }
     });
   };
-
   const renderCommentIcons = () => {
     return Object.values(commentIcons).map((commentIcon) => {
       if (!excalidrawAPI) {
@@ -483,35 +495,6 @@ export default function App() {
     );
   };
 
-  const renderMenu = () => {
-    return (
-      <MainMenu>
-        <MainMenu.DefaultItems.SaveAsImage />
-        <MainMenu.DefaultItems.Export />
-        <MainMenu.Separator />
-        {isCollaborating && (
-          <MainMenu.DefaultItems.LiveCollaboration
-            onSelect={() => window.alert("You clicked on collab button")}
-            isCollaborating={isCollaborating}
-          />
-        )}
-        <MainMenu.Group title="Excalidraw links">
-          <MainMenu.DefaultItems.Socials />
-        </MainMenu.Group>
-        <MainMenu.Separator />
-        <MainMenu.ItemCustom>
-          <button
-            style={{ height: "2rem" }}
-            onClick={() => window.alert("custom menu item")}
-          >
-            custom item
-          </button>
-        </MainMenu.ItemCustom>
-        <MainMenu.DefaultItems.Help />
-        {excalidrawAPI && <MobileFooter excalidrawAPI={excalidrawAPI} />}
-      </MainMenu>
-    );
-  };
   return (
     <div className="App" ref={appRef}>
       <h1> Excalidraw Example</h1>
@@ -692,12 +675,43 @@ export default function App() {
             onScrollChange={rerenderCommentIcons}
             renderSidebar={renderSidebar}
           >
-            {excalidrawAPI && (
+            <Footer>
-              <Footer>
+              <button
-                <CustomFooter excalidrawAPI={excalidrawAPI} />
+                className="custom-element"
-              </Footer>
+                onClick={() => {
-            )}
+                  excalidrawAPI?.setActiveTool({
-            {renderMenu()}
+                    type: "custom",
+                    customType: "comment",
+                  });
+                  const url = `data:${MIME_TYPES.svg},${encodeURIComponent(
+                    `<svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="feather feather-message-circle"
+            >
+              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
+            </svg>`,
+                  )}`;
+                  excalidrawAPI?.setCursor(`url(${url}), auto`);
+                }}
+              >
+                {COMMENT_SVG}
+              </button>
+              <button
+                className="custom-footer"
+                onClick={() => alert("This is dummy footer")}
+              >
+                {" "}
+                custom footer{" "}
+              </button>
+            </Footer>
           </Excalidraw>
           {Object.keys(commentIcons || []).length > 0 && renderCommentIcons()}
           {comment && renderComment()}

src/packages/excalidraw/example/CustomFooter.tsx

@@ -1,65 +0,0 @@
-import { ExcalidrawImperativeAPI } from "../../../types";
-import { MIME_TYPES } from "../entry";
-const COMMENT_SVG = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="feather feather-message-circle"
-  >
-    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
-  </svg>
-);
-const CustomFooter = ({
-  excalidrawAPI,
-}: {
-  excalidrawAPI: ExcalidrawImperativeAPI;
-}) => {
-  return (
-    <>
-      <button
-        className="custom-element"
-        onClick={() => {
-          excalidrawAPI?.setActiveTool({
-            type: "custom",
-            customType: "comment",
-          });
-          const url = `data:${MIME_TYPES.svg},${encodeURIComponent(
-            `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="feather feather-message-circle"
-  >
-    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
-  </svg>`,
-          )}`;
-          excalidrawAPI?.setCursor(`url(${url}), auto`);
-        }}
-      >
-        {COMMENT_SVG}
-      </button>
-      <button
-        className="custom-footer"
-        onClick={() => alert("This is dummy footer")}
-      >
-        {" "}
-        custom footer{" "}
-      </button>
-    </>
-  );
-};
-
-export default CustomFooter;

src/packages/excalidraw/example/MobileFooter.tsx

@@ -1,20 +0,0 @@
-import { ExcalidrawImperativeAPI } from "../../../types";
-import CustomFooter from "./CustomFooter";
-const { useDevice, Footer } = window.ExcalidrawLib;
-
-const MobileFooter = ({
-  excalidrawAPI,
-}: {
-  excalidrawAPI: ExcalidrawImperativeAPI;
-}) => {
-  const device = useDevice();
-  if (device.isMobile) {
-    return (
-      <Footer>
-        <CustomFooter excalidrawAPI={excalidrawAPI} />
-      </Footer>
-    );
-  }
-  return null;
-};
-export default MobileFooter;

src/packages/excalidraw/index.tsx

@@ -11,7 +11,6 @@ import { DEFAULT_UI_OPTIONS } from "../../constants";
 import { Provider } from "jotai";
 import { jotaiScope, jotaiStore } from "../../jotai";
 import Footer from "../../components/footer/FooterCenter";
-import MainMenu from "../../components/mainMenu/MainMenu";
 
 const ExcalidrawBase = (props: ExcalidrawProps) => {
   const {
@@ -240,5 +239,3 @@ export {
 
 export { Sidebar } from "../../components/Sidebar/Sidebar";
 export { Footer };
-export { MainMenu };
-export { useDevice } from "../../components/App";

src/renderer/easingFunctions.ts

@@ -0,0 +1,151 @@
+//https://github.com/ai/easings.net/blob/master/src/easings/easingsFunctions.ts
+type EasingFunction = (progress: number) => number;
+
+interface EasingDictionary {
+  [easing: string]: EasingFunction;
+}
+
+const pow = Math.pow;
+const sqrt = Math.sqrt;
+const sin = Math.sin;
+const cos = Math.cos;
+const PI = Math.PI;
+const c1 = 1.70158;
+const c2 = c1 * 1.525;
+const c3 = c1 + 1;
+const c4 = (2 * PI) / 3;
+const c5 = (2 * PI) / 4.5;
+
+const bounceOut: EasingFunction = function (x) {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+
+  if (x < 1 / d1) {
+    return n1 * x * x;
+  } else if (x < 2 / d1) {
+    return n1 * (x -= 1.5 / d1) * x + 0.75;
+  } else if (x < 2.5 / d1) {
+    return n1 * (x -= 2.25 / d1) * x + 0.9375;
+  }
+  return n1 * (x -= 2.625 / d1) * x + 0.984375;
+};
+
+const easingsFunctions: EasingDictionary = {
+  linear: (x) => x,
+  easeInQuad(x) {
+    return x * x;
+  },
+  easeOutQuad(x) {
+    return 1 - (1 - x) * (1 - x);
+  },
+  easeInOutQuad(x) {
+    return x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2;
+  },
+  easeInCubic(x) {
+    return x * x * x;
+  },
+  easeOutCubic(x) {
+    return 1 - pow(1 - x, 3);
+  },
+  easeInOutCubic(x) {
+    return x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2;
+  },
+  easeInQuart(x) {
+    return x * x * x * x;
+  },
+  easeOutQuart(x) {
+    return 1 - pow(1 - x, 4);
+  },
+  easeInOutQuart(x) {
+    return x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2;
+  },
+  easeInQuint(x) {
+    return x * x * x * x * x;
+  },
+  easeOutQuint(x) {
+    return 1 - pow(1 - x, 5);
+  },
+  easeInOutQuint(x) {
+    return x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2;
+  },
+  easeInSine(x) {
+    return 1 - cos((x * PI) / 2);
+  },
+  easeOutSine(x) {
+    return sin((x * PI) / 2);
+  },
+  easeInOutSine(x) {
+    return -(cos(PI * x) - 1) / 2;
+  },
+  easeInExpo(x) {
+    return x === 0 ? 0 : pow(2, 10 * x - 10);
+  },
+  easeOutExpo(x) {
+    return x === 1 ? 1 : 1 - pow(2, -10 * x);
+  },
+  easeInOutExpo(x) {
+    return x === 0
+      ? 0
+      : x === 1
+      ? 1
+      : x < 0.5
+      ? pow(2, 20 * x - 10) / 2
+      : (2 - pow(2, -20 * x + 10)) / 2;
+  },
+  easeInCirc(x) {
+    return 1 - sqrt(1 - pow(x, 2));
+  },
+  easeOutCirc(x) {
+    return sqrt(1 - pow(x - 1, 2));
+  },
+  easeInOutCirc(x) {
+    return x < 0.5
+      ? (1 - sqrt(1 - pow(2 * x, 2))) / 2
+      : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2;
+  },
+  easeInBack(x) {
+    return c3 * x * x * x - c1 * x * x;
+  },
+  easeOutBack(x) {
+    return 1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2);
+  },
+  easeInOutBack(x) {
+    return x < 0.5
+      ? (pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
+      : (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
+  },
+  easeInElastic(x) {
+    return x === 0
+      ? 0
+      : x === 1
+      ? 1
+      : -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4);
+  },
+  easeOutElastic(x) {
+    return x === 0
+      ? 0
+      : x === 1
+      ? 1
+      : pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
+  },
+  easeInOutElastic(x) {
+    return x === 0
+      ? 0
+      : x === 1
+      ? 1
+      : x < 0.5
+      ? -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2
+      : (pow(2, -20 * x + 10) * sin((20 * x - 11.125) * c5)) / 2 + 1;
+  },
+  easeInBounce(x) {
+    return 1 - bounceOut(1 - x);
+  },
+  easeOutBounce: bounceOut,
+  easeInOutBounce(x) {
+    return x < 0.5
+      ? (1 - bounceOut(1 - 2 * x)) / 2
+      : (1 + bounceOut(2 * x - 1)) / 2;
+  },
+};
+
+export default easingsFunctions;

src/renderer/renderElement.ts

@@ -46,6 +46,7 @@ import {
   getContainerElement,
 } from "../element/textElement";
 import { LinearElementEditor } from "../element/linearElementEditor";
+import easingsFunctions from "./easingFunctions";
 
 // using a stronger invert (100% vs our regular 93%) and saturate
 // as a temp hack to make images in dark theme look closer to original
@@ -237,7 +238,16 @@ const drawElementOnCanvas = (
         rc.draw(fillShape);
       }
 
-      context.fillStyle = element.strokeColor;
+      if (element.customData?.strokeOptions?.hasOutline) {
+        context.lineWidth =
+          element.strokeWidth *
+          (element.customData.strokeOptions.outlineWidth ?? 1);
+        context.strokeStyle = element.strokeColor;
+        context.stroke(path);
+        context.fillStyle = element.backgroundColor;
+      } else {
+        context.fillStyle = element.strokeColor;
+      }
       context.fill(path);
 
       context.restore();
@@ -1185,7 +1195,23 @@ export const renderElementToSvg = (
       );
       node.setAttribute("stroke", "none");
       const path = svgRoot.ownerDocument!.createElementNS(SVG_NS, "path");
-      path.setAttribute("fill", element.strokeColor);
+      if (element.customData?.strokeOptions?.hasOutline) {
+        node.setAttribute(
+          "stroke-width",
+          `${
+            element.strokeWidth *
+            (element.customData.strokeOptions.outlineWidth ?? 1)
+          }`,
+        );
+        const outline = svgRoot.ownerDocument!.createElementNS(SVG_NS, "path");
+        outline.setAttribute("fill", "none");
+        outline.setAttribute("stroke", element.strokeColor);
+        outline.setAttribute("d", getFreeDrawSvgPath(element));
+        node.appendChild(outline);
+        path.setAttribute("fill", element.backgroundColor);
+      } else {
+        path.setAttribute("fill", element.strokeColor);
+      }
       path.setAttribute("d", getFreeDrawSvgPath(element));
       node.appendChild(path);
       root.appendChild(node);
@@ -1328,15 +1354,43 @@ export function getFreeDrawSvgPath(element: ExcalidrawFreeDrawElement) {
     : [[0, 0, 0.5]];
 
   // Consider changing the options for simulated pressure vs real pressure
-  const options: StrokeOptions = {
+  const customOptions = element.customData?.strokeOptions?.options;
-    simulatePressure: element.simulatePressure,
+  const options: StrokeOptions = customOptions
-    size: element.strokeWidth * 4.25,
+    ? {
-    thinning: 0.6,
+        ...customOptions,
-    smoothing: 0.5,
+        simulatePressure:
-    streamline: 0.5,
+          customOptions.simulatePressure ?? element.simulatePressure,
-    easing: (t) => Math.sin((t * Math.PI) / 2), // https://easings.net/#easeOutSine
+        size: element.strokeWidth * 4.25, //override size with stroke width
-    last: !!element.lastCommittedPoint, // LastCommittedPoint is added on pointerup
+        last: !!element.lastCommittedPoint,
-  };
+        easing: easingsFunctions[customOptions.easing] ?? ((t) => t),
+        ...(customOptions.start?.easing
+          ? {
+              start: {
+                ...customOptions.start,
+                easing:
+                  easingsFunctions[customOptions.start.easing] ?? ((t) => t),
+              },
+            }
+          : { start: customOptions.start }),
+        ...(customOptions.end?.easing
+          ? {
+              end: {
+                ...customOptions.end,
+                easing:
+                  easingsFunctions[customOptions.end.easing] ?? ((t) => t),
+              },
+            }
+          : { end: customOptions.end }),
+      }
+    : {
+        simulatePressure: element.simulatePressure,
+        size: element.strokeWidth * 4.25,
+        thinning: 0.6,
+        smoothing: 0.5,
+        streamline: 0.5,
+        easing: easingsFunctions.easeOutSine,
+        last: !!element.lastCommittedPoint, // LastCommittedPoint is added on pointerup
+      };
 
   return getSvgPathFromStroke(getStroke(inputPoints as number[][], options));
 }

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -14613,7 +14613,7 @@ Object {
   "offsetLeft": 0,
   "offsetTop": 0,
   "openDialog": null,
-  "openMenu": "canvas",
+  "openMenu": null,
   "openPopup": null,
   "openSidebar": null,
   "pasteDialog": Object {
@@ -14672,7 +14672,7 @@ Object {
 
 exports[`regression tests rerenders UI on language change: [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests rerenders UI on language change: [end of test] number of renders 1`] = `11`;
+exports[`regression tests rerenders UI on language change: [end of test] number of renders 1`] = `10`;
 
 exports[`regression tests shift click on selected element should deselect it on pointer up: [end of test] appState 1`] = `
 Object {

src/tests/packages/excalidraw.test.tsx

@@ -1,5 +1,5 @@
-import { fireEvent, GlobalTestState, toggleMenu, render } from "../test-utils";
+import { fireEvent, GlobalTestState, render } from "../test-utils";
-import { Excalidraw, Footer, MainMenu } from "../../packages/excalidraw/index";
+import { Excalidraw, Footer } from "../../packages/excalidraw/index";
 import { queryByText, queryByTestId } from "@testing-library/react";
 import { GRID_SIZE, THEME } from "../../constants";
 import { t } from "../../i18n";
@@ -7,12 +7,6 @@ import { t } from "../../i18n";
 const { h } = window;
 
 describe("<Excalidraw/>", () => {
-  afterEach(() => {
-    const menu = document.querySelector(".dropdown-menu");
-    if (menu) {
-      toggleMenu(document.querySelector(".excalidraw")!);
-    }
-  });
   describe("Test zenModeEnabled prop", () => {
     it('should show exit zen mode button when zen mode is set and zen mode option in context menu when zenModeEnabled is "undefined"', async () => {
       const { container } = await render(<Excalidraw />);
@@ -62,7 +56,9 @@ describe("<Excalidraw/>", () => {
         <div>This is a custom footer</div>
       </Excalidraw>,
     );
-    expect(container.querySelector(".footer-center")).toBe(null);
+    expect(
+      container.querySelector(".layer-ui__wrapper__footer-center"),
+    ).toBeEmptyDOMElement();
 
     // Footer passed hence it will render the footer
     ({ container } = await render(
@@ -72,17 +68,12 @@ describe("<Excalidraw/>", () => {
         </Footer>
       </Excalidraw>,
     ));
-    expect(container.querySelector(".footer-center")).toMatchInlineSnapshot(`
+    expect(
-      <div
+      container.querySelector(".layer-ui__wrapper__footer-center")?.innerHTML,
-        class="footer-center zen-mode-transition"
+    ).toMatchInlineSnapshot(
-      >
+      `"<div class=\\"layer-ui__wrapper__footer-center zen-mode-transition\\"><div>This is a custom footer</div></div>"`,
-        <div>
+    );
-          This is a custom footer
-        </div>
-      </div>
-    `);
   });
-
   describe("Test gridModeEnabled prop", () => {
     it('should show grid mode in context menu when gridModeEnabled is "undefined"', async () => {
       const { container } = await render(<Excalidraw />);
@@ -121,51 +112,98 @@ describe("<Excalidraw/>", () => {
     });
   });
 
-  it("should render main menu with host menu items if passed from host", async () => {
+  describe("Test theme prop", () => {
-    const { container } = await render(
+    it("should show the theme toggle by default", async () => {
-      <Excalidraw UIOptions={undefined}>
+      const { container } = await render(<Excalidraw />);
-        <MainMenu>
+
-          <MainMenu.Item onSelect={() => window.alert("Clicked")}>
+      expect(h.state.theme).toBe(THEME.LIGHT);
-            Click me
+
-          </MainMenu.Item>
+      queryByTestId(container, "menu-button")!.click();
-          <MainMenu.ItemLink href="blog.excalidaw.com">
+      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
-            Excalidraw blog
+      expect(darkModeToggle).toBeTruthy();
-          </MainMenu.ItemLink>
+    });
-          <MainMenu.ItemCustom>
+
-            <button
+    it("should not show theme toggle when the theme prop is defined", async () => {
-              style={{ height: "2rem" }}
+      const { container } = await render(<Excalidraw theme="dark" />);
-              onClick={() => window.alert("custom menu item")}
+      expect(h.state.theme).toBe(THEME.DARK);
-            >
+      expect(queryByTestId(container, "toggle-dark-mode")).toBe(null);
-              {" "}
+    });
-              custom menu item
+
-            </button>
+    it("should show theme mode toggle when `UIOptions.canvasActions.toggleTheme` is true", async () => {
-          </MainMenu.ItemCustom>
+      const { container } = await render(
-          <MainMenu.DefaultItems.Help />
+        <Excalidraw
-        </MainMenu>
+          theme={THEME.DARK}
-      </Excalidraw>,
+          UIOptions={{ canvasActions: { toggleTheme: true } }}
-    );
+        />,
-    //open menu
+      );
-    toggleMenu(container);
+      expect(h.state.theme).toBe(THEME.DARK);
-    expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
+      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
+      expect(darkModeToggle).toBeTruthy();
+    });
+
+    it("should not show theme toggle when `UIOptions.canvasActions.toggleTheme` is false", async () => {
+      const { container } = await render(
+        <Excalidraw
+          UIOptions={{ canvasActions: { toggleTheme: false } }}
+          theme={THEME.DARK}
+        />,
+      );
+      expect(h.state.theme).toBe(THEME.DARK);
+      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
+      expect(darkModeToggle).toBeFalsy();
+    });
+  });
+
+  describe("Test name prop", () => {
+    it('should allow editing name when the name prop is "undefined"', async () => {
+      const { container } = await render(<Excalidraw />);
+
+      fireEvent.click(queryByTestId(container, "image-export-button")!);
+      const textInput: HTMLInputElement | null = document.querySelector(
+        ".ExportDialog .ProjectName .TextInput",
+      );
+      expect(textInput?.value).toContain(`${t("labels.untitled")}`);
+      expect(textInput?.nodeName).toBe("INPUT");
+    });
+
+    it('should set the name and not allow editing when the name prop is present"', async () => {
+      const name = "test";
+      const { container } = await render(<Excalidraw name={name} />);
+
+      await fireEvent.click(queryByTestId(container, "image-export-button")!);
+      const textInput = document.querySelector(
+        ".ExportDialog .ProjectName .TextInput--readonly",
+      );
+      expect(textInput?.textContent).toEqual(name);
+      expect(textInput?.nodeName).toBe("SPAN");
+    });
   });
 
   describe("Test UIOptions prop", () => {
+    it('should not hide any UI element when the UIOptions prop is "undefined"', async () => {
+      await render(<Excalidraw />);
+
+      const canvasActions = document.querySelector(
+        'section[aria-labelledby="test-id-canvasActions-title"]',
+      );
+
+      expect(canvasActions).toMatchSnapshot();
+    });
+
     describe("Test canvasActions", () => {
-      it('should render menu with default items when "UIOPtions" is "undefined"', async () => {
+      it('should not hide any UI element when canvasActions is "undefined"', async () => {
-        const { container } = await render(
+        await render(<Excalidraw UIOptions={{}} />);
-          <Excalidraw UIOptions={undefined} />,
+        const canvasActions = document.querySelector(
+          'section[aria-labelledby="test-id-canvasActions-title"]',
         );
-        //open menu
+        expect(canvasActions).toMatchSnapshot();
-        toggleMenu(container);
-        expect(queryByTestId(container, "dropdown-menu")).toMatchSnapshot();
       });
 
       it("should hide clear canvas button when clearCanvas is false", async () => {
         const { container } = await render(
           <Excalidraw UIOptions={{ canvasActions: { clearCanvas: false } }} />,
         );
-        //open menu
+
-        toggleMenu(container);
         expect(queryByTestId(container, "clear-canvas-button")).toBeNull();
       });
 
@@ -173,8 +211,7 @@ describe("<Excalidraw/>", () => {
         const { container } = await render(
           <Excalidraw UIOptions={{ canvasActions: { export: false } }} />,
         );
-        //open menu
+
-        toggleMenu(container);
         expect(queryByTestId(container, "json-export-button")).toBeNull();
       });
 
@@ -182,8 +219,7 @@ describe("<Excalidraw/>", () => {
         const { container } = await render(
           <Excalidraw UIOptions={{ canvasActions: { saveAsImage: false } }} />,
         );
-        //open menu
+
-        toggleMenu(container);
         expect(queryByTestId(container, "image-export-button")).toBeNull();
       });
 
@@ -201,8 +237,7 @@ describe("<Excalidraw/>", () => {
             UIOptions={{ canvasActions: { export: { saveFileToDisk: false } } }}
           />,
         );
-        //open menu
+
-        toggleMenu(container);
         expect(queryByTestId(container, "save-as-button")).toBeNull();
       });
 
@@ -212,8 +247,7 @@ describe("<Excalidraw/>", () => {
             UIOptions={{ canvasActions: { saveToActiveFile: false } }}
           />,
         );
-        //open menu
+
-        toggleMenu(container);
         expect(queryByTestId(container, "save-button")).toBeNull();
       });
 
@@ -223,8 +257,7 @@ describe("<Excalidraw/>", () => {
             UIOptions={{ canvasActions: { changeViewBackgroundColor: false } }}
           />,
         );
-        //open menu
+
-        toggleMenu(container);
         expect(queryByTestId(container, "canvas-background-picker")).toBeNull();
       });
 
@@ -232,110 +265,12 @@ describe("<Excalidraw/>", () => {
         const { container } = await render(
           <Excalidraw UIOptions={{ canvasActions: { toggleTheme: false } }} />,
         );
-        //open menu
+
-        toggleMenu(container);
         expect(queryByTestId(container, "toggle-dark-mode")).toBeNull();
       });
-
-      it("should not render default items in custom menu even if passed if the prop in `canvasActions` is set to false", async () => {
-        const { container } = await render(
-          <Excalidraw UIOptions={{ canvasActions: { loadScene: false } }}>
-            <MainMenu>
-              <MainMenu.ItemCustom>
-                <button
-                  style={{ height: "2rem" }}
-                  onClick={() => window.alert("custom menu item")}
-                >
-                  {" "}
-                  custom item
-                </button>
-              </MainMenu.ItemCustom>
-              <MainMenu.DefaultItems.LoadScene />
-            </MainMenu>
-          </Excalidraw>,
-        );
-        //open menu
-        toggleMenu(container);
-        // load button shouldn't be rendered since `UIActions.canvasActions.loadScene` is `false`
-        expect(queryByTestId(container, "load-button")).toBeNull();
-      });
     });
   });
 
-  describe("Test theme prop", () => {
-    it("should show the theme toggle by default", async () => {
-      const { container } = await render(<Excalidraw />);
-      expect(h.state.theme).toBe(THEME.LIGHT);
-      //open menu
-      toggleMenu(container);
-      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
-      expect(darkModeToggle).toBeTruthy();
-    });
-
-    it("should not show theme toggle when the theme prop is defined", async () => {
-      const { container } = await render(<Excalidraw theme={THEME.DARK} />);
-
-      expect(h.state.theme).toBe(THEME.DARK);
-      //open menu
-      toggleMenu(container);
-      expect(queryByTestId(container, "toggle-dark-mode")).toBe(null);
-    });
-
-    it("should show theme mode toggle when `UIOptions.canvasActions.toggleTheme` is true", async () => {
-      const { container } = await render(
-        <Excalidraw
-          theme={THEME.DARK}
-          UIOptions={{ canvasActions: { toggleTheme: true } }}
-        />,
-      );
-      expect(h.state.theme).toBe(THEME.DARK);
-      //open menu
-      toggleMenu(container);
-      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
-      expect(darkModeToggle).toBeTruthy();
-    });
-
-    it("should not show theme toggle when `UIOptions.canvasActions.toggleTheme` is false", async () => {
-      const { container } = await render(
-        <Excalidraw
-          UIOptions={{ canvasActions: { toggleTheme: false } }}
-          theme={THEME.DARK}
-        />,
-      );
-      expect(h.state.theme).toBe(THEME.DARK);
-      //open menu
-      toggleMenu(container);
-      const darkModeToggle = queryByTestId(container, "toggle-dark-mode");
-      expect(darkModeToggle).toBeFalsy();
-    });
-  });
-
-  describe("Test name prop", () => {
-    it('should allow editing name when the name prop is "undefined"', async () => {
-      const { container } = await render(<Excalidraw />);
-      //open menu
-      toggleMenu(container);
-      fireEvent.click(queryByTestId(container, "image-export-button")!);
-      const textInput: HTMLInputElement | null = document.querySelector(
-        ".ExportDialog .ProjectName .TextInput",
-      );
-      expect(textInput?.value).toContain(`${t("labels.untitled")}`);
-      expect(textInput?.nodeName).toBe("INPUT");
-    });
-
-    it('should set the name and not allow editing when the name prop is present"', async () => {
-      const name = "test";
-      const { container } = await render(<Excalidraw name={name} />);
-      //open menu
-      toggleMenu(container);
-      await fireEvent.click(queryByTestId(container, "image-export-button")!);
-      const textInput = document.querySelector(
-        ".ExportDialog .ProjectName .TextInput--readonly",
-      );
-      expect(textInput?.textContent).toEqual(name);
-      expect(textInput?.nodeName).toBe("SPAN");
-    });
-  });
   describe("Test autoFocus prop", () => {
     it("should not focus when autoFocus is false", async () => {
       const { container } = await render(<Excalidraw />);

src/tests/regressionTests.test.tsx

@@ -446,7 +446,7 @@ describe("regression tests", () => {
     UI.clickTool("rectangle");
     // english lang should display `thin` label
     expect(screen.queryByTitle(/thin/i)).not.toBeNull();
-    fireEvent.click(document.querySelector(".dropdown-menu-button")!);
+    fireEvent.click(document.querySelector(".menu-button")!);
 
     fireEvent.change(document.querySelector(".dropdown-select__language")!, {
       target: { value: "de-DE" },

src/tests/test-utils.ts

@@ -6,7 +6,6 @@ import {
   RenderResult,
   RenderOptions,
   waitFor,
-  fireEvent,
 } from "@testing-library/react";
 
 import * as toolQueries from "./queries/toolQueries";
@@ -185,8 +184,3 @@ export const assertSelectedElements = (
   expect(selectedElementIds.length).toBe(ids.length);
   expect(selectedElementIds).toEqual(expect.arrayContaining(ids));
 };
-
-export const toggleMenu = (container: HTMLElement) => {
-  // open menu
-  fireEvent.click(container.querySelector(".dropdown-menu-button")!);
-};

src/types.ts

@@ -161,7 +161,7 @@ export type AppState = {
     | "strokeColorPicker"
     | null;
   openSidebar: "library" | "customSidebar" | null;
-  openDialog: "imageExport" | "help" | "jsonExport" | null;
+  openDialog: "imageExport" | "help" | null;
   isSidebarDocked: boolean;
 
   lastPointerDownWith: PointerType;
@@ -517,7 +517,7 @@ export type Device = Readonly<{
 }>;
 
 export type UIChildrenComponents = {
-  [k in "FooterCenter" | "Menu"]?:
+  [k in "FooterCenter"]?:
     | React.ReactPortal
     | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 };

yarn.lock

@@ -2280,11 +2280,6 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@socket.io/component-emitter@~3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
-  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
-
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -2799,6 +2794,11 @@
     "@types/mime" "*"
     "@types/node" "*"
 
+"@types/socket.io-client@1.4.36":
+  version "1.4.36"
+  resolved "https://registry.yarnpkg.com/@types/socket.io-client/-/socket.io-client-1.4.36.tgz#e4f1ca065f84c20939e9850e70222202bd76ff3f"
+  integrity sha512-ZJWjtFBeBy1kRSYpVbeGYTElf6BqPQUkXDlHHD4k/42byCN5Rh027f4yARHCink9sKAkbtGZXEAmR0ZCnc2/Ag==
+
 "@types/sockjs@^0.3.33":
   version "0.3.33"
   resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.33.tgz#570d3a0b99ac995360e3136fd6045113b1bd236f"
@@ -3138,6 +3138,11 @@ adjust-sourcemap-loader@^4.0.0:
     loader-utils "^2.0.0"
     regex-parser "^2.2.11"
 
+after@0.8.2:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
+  integrity sha512-QbJ0NTQ/I9DI3uSJA4cbexiwQeRAfjPScqIbSjUDd9TOrcg6pTkdgziesOqxBMBzit8vFCTwrP27t13vFOORRA==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -3372,6 +3377,11 @@ array.prototype.tosorted@^1.1.1:
     es-shim-unscopables "^1.0.0"
     get-intrinsic "^1.1.3"
 
+arraybuffer.slice@~0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz#3bbc4275dd584cc1b10809b89d4e8b63a69e7675"
+  integrity sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==
+
 asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
@@ -3392,6 +3402,11 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
 async@^2.6.4:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
@@ -3582,6 +3597,11 @@ babel-preset-react-app@^10.0.1:
     babel-plugin-macros "^3.1.0"
     babel-plugin-transform-react-remove-prop-types "^0.4.24"
 
+backo2@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+  integrity sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -3592,6 +3612,11 @@ base64-arraybuffer-es6@^0.7.0:
   resolved "https://registry.yarnpkg.com/base64-arraybuffer-es6/-/base64-arraybuffer-es6-0.7.0.tgz#dbe1e6c87b1bf1ca2875904461a7de40f21abc86"
   integrity sha512-ESyU/U1CFZDJUdr+neHRhNozeCv72Y7Vm0m1DCbjX3KBjT6eYocvAJlSk6+8+HkVwXlT1FNxhGW6q3UKAlCvvw==
 
+base64-arraybuffer@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz#9818c79e059b1355f97e0428a017c838e90ba812"
+  integrity sha512-a1eIFi4R9ySrbiMuyTGx5e92uRH5tQY6kArNcFaKBUleIoLjdjBg7Zxm3Mqm3Kmkf27HLR/1fnxX9q8GQ7Iavg==
+
 basic-auth@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.1.tgz#b998279bf47ce38344b4f3cf916d4679bbf51e3a"
@@ -3624,6 +3649,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
+blob@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.5.tgz#d680eeef25f8cd91ad533f5b01eed48e64caf683"
+  integrity sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==
+
 bluebird@^3.5.5:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@@ -4019,6 +4049,21 @@ commondir@^1.0.1:
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
+component-bind@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
+  integrity sha512-WZveuKPeKAG9qY+FkYDeADzdHyTYdIboXS59ixDeRJL5ZhxpqUnxSOwop4FQjMsiYm3/Or8cegVbpAHNA7pHxw==
+
+component-emitter@~1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
+  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
+
+component-inherit@0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
+  integrity sha512-w+LhYREhatpVqTESyGFg3NlP6Iu0kEKUHETY9GoZP/pQyW4mHFZuFWRUCIqVPZ36ueVLtoOEZaAqbCF2RDndaA==
+
 compressible@~2.0.16:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@@ -4401,7 +4446,7 @@ debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -4415,6 +4460,13 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@~3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 decimal.js@^10.2.1:
   version "10.4.2"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.2.tgz#0341651d1d997d86065a2ce3a441fbd0d8e8b98e"
@@ -4755,21 +4807,33 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
-engine.io-client@~6.2.3:
+engine.io-client@~3.4.0:
-  version "6.2.3"
+  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.3.tgz#a8cbdab003162529db85e9de31575097f6d29458"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.4.4.tgz#77d8003f502b0782dd792b073a4d2cf7ca5ab967"
-  integrity sha512-aXPtgF1JS3RuuKcpSrBtimSjYvrbhKW9froICH4s0F3XQWLxsKNxqzG39nnvQZQnva4CMvUK63T7shevxRyYHw==
+  integrity sha512-iU4CRr38Fecj8HoZEnFtm2EiKGbYZcPn3cHxqNGl/tmdWRf60KhK+9vE0JeSjgnlS/0oynEfLgKbT9ALpim0sQ==
   dependencies:
-    "@socket.io/component-emitter" "~3.1.0"
+    component-emitter "~1.3.0"
-    debug "~4.3.1"
+    component-inherit "0.0.3"
-    engine.io-parser "~5.0.3"
+    debug "~3.1.0"
-    ws "~8.2.3"
+    engine.io-parser "~2.2.0"
-    xmlhttprequest-ssl "~2.0.0"
+    has-cors "1.1.0"
+    indexof "0.0.1"
+    parseqs "0.0.6"
+    parseuri "0.0.6"
+    ws "~6.1.0"
+    xmlhttprequest-ssl "~1.5.4"
+    yeast "0.1.2"
 
-engine.io-parser@~5.0.3:
+engine.io-parser@~2.2.0:
-  version "5.0.4"
+  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.2.1.tgz#57ce5611d9370ee94f99641b589f94c97e4f5da7"
-  integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
+  integrity sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==
+  dependencies:
+    after "0.8.2"
+    arraybuffer.slice "~0.0.7"
+    base64-arraybuffer "0.1.4"
+    blob "0.0.5"
+    has-binary2 "~1.0.2"
 
 enhanced-resolve@^5.10.0:
   version "5.10.0"
@@ -5796,6 +5860,18 @@ has-bigints@^1.0.1, has-bigints@^1.0.2:
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
   integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
 
+has-binary2@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.3.tgz#7776ac627f3ea77250cfc332dab7ddf5e4f5d11d"
+  integrity sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==
+  dependencies:
+    isarray "2.0.1"
+
+has-cors@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
+  integrity sha512-g5VNKdkFuUuVCP9gYfDJHjK2nqdQJ7aDLTnycnc2+RvsOQbuLdF5pm7vuE5J76SEBIQjs4kQY/BWq74JUmjbXA==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -6115,6 +6191,11 @@ indent-string@^4.0.0:
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+indexof@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  integrity sha512-i0G7hLJ1z0DE8dsqJa2rycj9dBmNKgXBvotXtZYXakU9oivfB9Uj2ZBC27qqef2U58/ZLwalxa1X/RDCdkHtVg==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -6382,6 +6463,11 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
+isarray@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
+  integrity sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==
+
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -7911,6 +7997,16 @@ parse5@6.0.1:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
+parseqs@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.6.tgz#8e4bb5a19d1cdc844a08ac974d34e273afa670d5"
+  integrity sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==
+
+parseuri@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.6.tgz#e1496e829e3ac2ff47f39a4dd044b32823c4a25a"
+  integrity sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -9559,23 +9655,31 @@ sliced@^1.0.1:
   resolved "https://registry.yarnpkg.com/sliced/-/sliced-1.0.1.tgz#0b3a662b5d04c3177b1926bea82b03f837a2ef41"
   integrity sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA==
 
-socket.io-client@4.5.4:
+socket.io-client@2.3.1:
-  version "4.5.4"
+  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.4.tgz#d3cde8a06a6250041ba7390f08d2468ccebc5ac9"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-2.3.1.tgz#91a4038ef4d03c19967bb3c646fec6e0eaa78cff"
-  integrity sha512-ZpKteoA06RzkD32IbqILZ+Cnst4xewU7ZYK12aS1mzHftFFjpoMz69IuhP/nL25pJfao/amoPI527KnuhFm01g==
+  integrity sha512-YXmXn3pA8abPOY//JtYxou95Ihvzmg8U6kQyolArkIyLd0pgVhrfor/iMsox8cn07WCOOvvuJ6XKegzIucPutQ==
   dependencies:
-    "@socket.io/component-emitter" "~3.1.0"
+    backo2 "1.0.2"
-    debug "~4.3.2"
+    component-bind "1.0.0"
-    engine.io-client "~6.2.3"
+    component-emitter "~1.3.0"
-    socket.io-parser "~4.2.1"
+    debug "~3.1.0"
+    engine.io-client "~3.4.0"
+    has-binary2 "~1.0.2"
+    indexof "0.0.1"
+    parseqs "0.0.6"
+    parseuri "0.0.6"
+    socket.io-parser "~3.3.0"
+    to-array "0.1.4"
 
-socket.io-parser@~4.2.1:
+socket.io-parser@~3.3.0:
-  version "4.2.1"
+  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.1.tgz#01c96efa11ded938dcb21cbe590c26af5eff65e5"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-3.3.3.tgz#3a8b84823eba87f3f7624e64a8aaab6d6318a72f"
-  integrity sha512-V4GrkLy+HeF1F/en3SpUaM+7XxYXpuMUWLGde1kSSh5nQMN4hLrbPIkD+otwh6q9R6NOQBN4AMaOZ2zVjui82g==
+  integrity sha512-qOg87q1PMWWTeO01768Yh9ogn7chB9zkKtQnya41Y355S0UmpXgpcrFwAgjYJxu9BdKug5r5e9YtVSeWhKBUZg==
   dependencies:
-    "@socket.io/component-emitter" "~3.1.0"
+    component-emitter "~1.3.0"
-    debug "~4.3.1"
+    debug "~3.1.0"
+    isarray "2.0.1"
 
 sockjs@^0.3.24:
   version "0.3.24"
@@ -10065,6 +10169,11 @@ tmpl@1.0.5:
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
   integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
 
+to-array@0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"
+  integrity sha512-LhVdShQD/4Mk4zXNroIQZJC+Ap3zgLcDuwEdcmLv9CCO73NWockQDwyUnW/m8VX/EElfL6FcYx7EeutN4HJA6A==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -10841,10 +10950,12 @@ ws@^8.4.2:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
 
-ws@~8.2.3:
+ws@~6.1.0:
-  version "8.2.3"
+  version "6.1.4"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.1.4.tgz#5b5c8800afab925e94ccb29d153c8d02c1776ef9"
-  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
+  integrity sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==
+  dependencies:
+    async-limiter "~1.0.0"
 
 xml-name-validator@^3.0.0:
   version "3.0.0"
@@ -10856,10 +10967,10 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xmlhttprequest-ssl@~2.0.0:
+xmlhttprequest-ssl@~1.5.4:
-  version "2.0.0"
+  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
-  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+  integrity sha512-/bFPLUgJrfGUL10AIv4Y7/CUt6so9CLtB/oFxQSHseSDNNCdC6vwwKEqwLN6wNPBg9YWXAiMu8jkf6RPRS/75Q==
 
 xmlhttprequest@1.8.0:
   version "1.8.0"
@@ -10904,6 +11015,11 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
+yeast@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"
+  integrity sha512-8HFIh676uyGYP6wP13R/j6OJ/1HwJ46snpvzE7aHAN3Ryqh2yX6Xox2B4CUmTwwOIzlG3Bs7ocsP5dZH/R1Qbg==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"