Update actionProperties.tsx

.husky/pre-commit

@@ -1,2 +1,2 @@
 #!/bin/sh
-# yarn lint-staged
+yarn lint-staged

dev-docs/yarn.lock

@@ -4692,9 +4692,9 @@ json-schema-traverse@^1.0.0:
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
 json5@^2.1.2, json5@^2.2.1:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
-  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
 jsonfile@^6.0.1:
   version "6.1.0"

package.json

@@ -103,7 +103,7 @@
   "private": true,
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env REACT_APP_DISABLE_SENTRY=true REACT_APP_DISABLE_TRACKING=true react-scripts build",
+    "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
     "build:app": "cross-env REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "build:version": "node ./scripts/build-version.js",
     "build": "yarn build:app && yarn build:version",

public/index.html

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

src/actions/actionBoundText.tsx

@@ -26,7 +26,7 @@ export const actionUnbindText = register({
   name: "unbindText",
   contextItemLabel: "labels.unbindText",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
+  contextItemPredicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
     return selectedElements.some((element) => hasBoundTextElement(element));
   },
@@ -76,7 +76,7 @@ export const actionBindText = register({
   name: "bindText",
   contextItemLabel: "labels.bindText",
   trackEvent: { category: "element" },
-  predicate: (elements, appState) => {
+  contextItemPredicate: (elements, appState) => {
     const selectedElements = getSelectedElements(elements, appState);
 
     if (selectedElements.length === 2) {

src/actions/actionCanvas.tsx

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

src/actions/actionClipboard.tsx

@@ -24,7 +24,7 @@ export const actionCopy = register({
       commitToHistory: false,
     };
   },
-  predicate: (elements, appState, appProps, app) => {
+  contextItemPredicate: (elements, appState, appProps, app) => {
     return app.device.isMobile && !!navigator.clipboard;
   },
   contextItemLabel: "labels.copy",
@@ -41,7 +41,7 @@ export const actionPaste = register({
       commitToHistory: false,
     };
   },
-  predicate: (elements, appState, appProps, app) => {
+  contextItemPredicate: (elements, appState, appProps, app) => {
     return app.device.isMobile && !!navigator.clipboard;
   },
   contextItemLabel: "labels.paste",
@@ -56,7 +56,7 @@ export const actionCut = register({
     actionCopy.perform(elements, appState, data, app);
     return actionDeleteSelected.perform(elements, appState);
   },
-  predicate: (elements, appState, appProps, app) => {
+  contextItemPredicate: (elements, appState, appProps, app) => {
     return app.device.isMobile && !!navigator.clipboard;
   },
   contextItemLabel: "labels.cut",
@@ -101,7 +101,7 @@ export const actionCopyAsSvg = register({
       };
     }
   },
-  predicate: (elements) => {
+  contextItemPredicate: (elements) => {
     return probablySupportsClipboardWriteText && elements.length > 0;
   },
   contextItemLabel: "labels.copyAsSvg",
@@ -158,7 +158,7 @@ export const actionCopyAsPng = register({
       };
     }
   },
-  predicate: (elements) => {
+  contextItemPredicate: (elements) => {
     return probablySupportsClipboardBlob && elements.length > 0;
   },
   contextItemLabel: "labels.copyAsPng",
@@ -188,7 +188,7 @@ export const copyText = register({
       commitToHistory: false,
     };
   },
-  predicate: (elements, appState) => {
+  contextItemPredicate: (elements, appState) => {
     return (
       probablySupportsClipboardWriteText &&
       getSelectedElements(elements, appState, true).some(isTextElement)

src/actions/actionExport.tsx

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

src/actions/actionFlip.ts

@@ -50,7 +50,7 @@ export const actionFlipHorizontal = register({
   },
   keyTest: (event) => event.shiftKey && event.code === "KeyH",
   contextItemLabel: "labels.flipHorizontal",
-  predicate: (elements, appState) =>
+  contextItemPredicate: (elements, appState) =>
     enableActionFlipHorizontal(elements, appState),
 });
 
@@ -67,7 +67,7 @@ export const actionFlipVertical = register({
   keyTest: (event) =>
     event.shiftKey && event.code === "KeyV" && !event[KEYS.CTRL_OR_CMD],
   contextItemLabel: "labels.flipVertical",
-  predicate: (elements, appState) =>
+  contextItemPredicate: (elements, appState) =>
     enableActionFlipVertical(elements, appState),
 });
 

src/actions/actionGroup.tsx

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

src/actions/actionLinearEditor.ts

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

src/actions/actionMenu.tsx

@@ -1,10 +1,12 @@
-import { HamburgerMenuIcon, palette } from "../components/icons";
+import { HamburgerMenuIcon, HelpIcon, palette } from "../components/icons";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import { showSelectedShapeActions, getNonDeletedElements } from "../element";
 import { register } from "./register";
 import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
 import { KEYS } from "../keys";
+import { HelpButton } from "../components/HelpButton";
+import MenuItem from "../components/MenuItem";
 
 export const actionToggleCanvasMenu = register({
   name: "toggleCanvasMenu",
@@ -86,5 +88,17 @@ export const actionShortcuts = register({
       commitToHistory: false,
     };
   },
+  PanelComponent: ({ updateData, isInHamburgerMenu }) =>
+    isInHamburgerMenu ? (
+      <MenuItem
+        label={t("helpDialog.title")}
+        dataTestId="help-menu-item"
+        icon={HelpIcon}
+        onClick={updateData}
+        shortcut="?"
+      />
+    ) : (
+      <HelpButton title={t("helpDialog.title")} onClick={updateData} />
+    ),
   keyTest: (event) => event.key === KEYS.QUESTION_MARK,
 });

src/actions/actionProperties.tsx

@@ -201,12 +201,23 @@ export const actionChangeStrokeColor = register({
   name: "changeStrokeColor",
   trackEvent: false,
   perform: (elements, appState, value) => {
+    const containers = getSelectedElements(elements, appState, false)
+      .filter((el) => el.boundElements)
+      .map((el) => el.id);
     return {
       ...(value.currentItemStrokeColor && {
         elements: changeProperty(
           elements,
           appState,
           (el) => {
+            if (
+              isTextElement(el) &&
+              el.containerId &&
+              containers.includes(el.containerId) &&
+              getContainerElement(el)?.strokeColor !== el.strokeColor
+            ) {
+              return el;
+            }
             return hasStrokeColor(el.type)
               ? newElementWith(el, {
                   strokeColor: value.currentItemStrokeColor,

src/actions/actionToggleGridMode.tsx

@@ -20,7 +20,7 @@ export const actionToggleGridMode = register({
     };
   },
   checked: (appState: AppState) => appState.gridSize !== null,
-  predicate: (element, appState, props) => {
+  contextItemPredicate: (element, appState, props) => {
     return typeof props.gridModeEnabled === "undefined";
   },
   contextItemLabel: "labels.showGrid",

src/actions/actionToggleViewMode.tsx

@@ -18,7 +18,7 @@ export const actionToggleViewMode = register({
     };
   },
   checked: (appState) => appState.viewModeEnabled,
-  predicate: (elements, appState, appProps) => {
+  contextItemPredicate: (elements, appState, appProps) => {
     return typeof appProps.viewModeEnabled === "undefined";
   },
   contextItemLabel: "labels.viewMode",

src/actions/actionToggleZenMode.tsx

@@ -18,7 +18,7 @@ export const actionToggleZenMode = register({
     };
   },
   checked: (appState) => appState.zenModeEnabled,
-  predicate: (elements, appState, appProps) => {
+  contextItemPredicate: (elements, appState, appProps) => {
     return typeof appProps.zenModeEnabled === "undefined";
   },
   contextItemLabel: "buttons.zenMode",

src/actions/manager.tsx

@@ -131,7 +131,11 @@ export class ActionManager {
   /**
    * @param data additional data sent to the PanelComponent
    */
-  renderAction = (name: ActionName, data?: PanelComponentProps["data"]) => {
+  renderAction = (
+    name: ActionName,
+    data?: PanelComponentProps["data"],
+    isInHamburgerMenu = false,
+  ) => {
     const canvasActions = this.app.props.UIOptions.canvasActions;
 
     if (
@@ -166,20 +170,11 @@ export class ActionManager {
           updateData={updateData}
           appProps={this.app.props}
           data={data}
+          isInHamburgerMenu={isInHamburgerMenu}
         />
       );
     }
 
     return null;
   };
-
-  isActionEnabled = (action: Action) => {
-    const elements = this.getElementsIncludingDeleted();
-    const appState = this.getAppState();
-
-    return (
-      !action.predicate ||
-      action.predicate(elements, appState, this.app.props, this.app)
-    );
-  };
 }

src/actions/types.ts

@@ -124,7 +124,9 @@ export type PanelComponentProps = {
 
 export interface Action {
   name: ActionName;
-  PanelComponent?: React.FC<PanelComponentProps>;
+  PanelComponent?: React.FC<
+    PanelComponentProps & { isInHamburgerMenu: boolean }
+  >;
   perform: ActionFn;
   keyPriority?: number;
   keyTest?: (
@@ -138,7 +140,7 @@ export interface Action {
         elements: readonly ExcalidrawElement[],
         appState: Readonly<AppState>,
       ) => string);
-  predicate?: (
+  contextItemPredicate?: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,
     appProps: ExcalidrawProps,

src/components/ActiveFile.tsx

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

src/components/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,
@@ -283,12 +287,15 @@ const deviceContextInitialValue = {
 };
 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 });
 ExcalidrawContainerContext.displayName = "ExcalidrawContainerContext";
+export const useExcalidrawContainer = () =>
+  useContext(ExcalidrawContainerContext);
 
 const ExcalidrawElementsContext = React.createContext<
   readonly NonDeletedExcalidrawElement[]
@@ -306,27 +313,15 @@ ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
 
 const ExcalidrawSetAppStateContext = React.createContext<
   React.Component<any, AppState>["setState"]
->(() => {
-  console.warn("unitialized ExcalidrawSetAppStateContext context!");
-});
+>(() => {});
 ExcalidrawSetAppStateContext.displayName = "ExcalidrawSetAppStateContext";
 
-const ExcalidrawActionManagerContext = React.createContext<ActionManager>(
-  null!,
-);
-ExcalidrawActionManagerContext.displayName = "ExcalidrawActionManagerContext";
-
-export const useDevice = () => useContext<Device>(DeviceContext);
-export const useExcalidrawContainer = () =>
-  useContext(ExcalidrawContainerContext);
 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;
@@ -539,7 +534,8 @@ class App extends React.Component<AppProps, AppState> {
       this.scene.getNonDeletedElements(),
       this.state,
     );
-    const { renderTopRightUI, renderCustomStats } = this.props;
+    const { onCollabButtonClick, renderTopRightUI, renderCustomStats } =
+      this.props;
 
     return (
       <div
@@ -563,81 +559,75 @@ class App extends React.Component<AppProps, AppState> {
                 <ExcalidrawElementsContext.Provider
                   value={this.scene.getNonDeletedElements()}
                 >
-                  <ExcalidrawActionManagerContext.Provider
-                    value={this.actionManager}
+                  <LayerUI
+                    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
-                      test={<div />}
-                      canvas={this.canvas}
-                      appState={this.state}
-                      files={this.files}
-                      setAppState={this.setAppState}
+                    {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}
-                      elements={this.scene.getNonDeletedElements()}
-                      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.isLoading &&
-                        this.props.UIOptions.welcomeScreen &&
-                        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>
+                    />
+                  )}
+                  <main>{this.renderCanvas()}</main>
                 </ExcalidrawElementsContext.Provider>{" "}
               </ExcalidrawAppStateContext.Provider>
             </ExcalidrawSetAppStateContext.Provider>
@@ -2018,20 +2008,6 @@ class App extends React.Component<AppProps, AppState> {
         return;
       }
 
-      if (event.key === KEYS.PAGE_UP || event.key === KEYS.PAGE_DOWN) {
-        let offset =
-          (event.shiftKey ? this.state.width : this.state.height) /
-          this.state.zoom.value;
-        if (event.key === KEYS.PAGE_DOWN) {
-          offset = -offset;
-        }
-        if (event.shiftKey) {
-          this.setState((state) => ({ scrollX: state.scrollX + offset }));
-        } else {
-          this.setState((state) => ({ scrollY: state.scrollY + offset }));
-        }
-      }
-
       if (this.actionManager.handleKeyDown(event)) {
         return;
       }
@@ -2054,6 +2030,12 @@ class App extends React.Component<AppProps, AppState> {
             ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
             : ELEMENT_TRANSLATE_AMOUNT);
 
+        const selectedElements = getSelectedElements(
+          this.scene.getNonDeletedElements(),
+          this.state,
+          true,
+        );
+
         let offsetX = 0;
         let offsetY = 0;
 
@@ -2067,12 +2049,6 @@ class App extends React.Component<AppProps, AppState> {
           offsetY = step;
         }
 
-        const selectedElements = getSelectedElements(
-          this.scene.getNonDeletedElements(),
-          this.state,
-          true,
-        );
-
         selectedElements.forEach((element) => {
           mutateElement(element, {
             x: element.x + offsetX,

src/components/Button.scss

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

src/components/Button.tsx

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

src/components/ClearCanvas.tsx

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

src/components/CollabButton.scss

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

src/components/CollabButton.tsx

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

src/components/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 });
-            setIsLibraryMenuOpen(false);
+            setIsMenuOpen(false);
+            setIsDropdownOpen(false);
             onCancel();
           }}
         />
         <DialogActionButton
           label={confirmText}
           onClick={() => {
-            setAppState({ openMenu: null });
-            setIsLibraryMenuOpen(false);
+            setIsMenuOpen(false);
+            setIsDropdownOpen(false);
             onConfirm();
           }}
           actionType="danger"

src/components/ContextMenu.tsx

@@ -39,8 +39,8 @@ export const ContextMenu = React.memo(
       if (
         item &&
         (item === CONTEXT_MENU_SEPARATOR ||
-          !item.predicate ||
-          item.predicate(
+          !item.contextItemPredicate ||
+          item.contextItemPredicate(
             elements,
             appState,
             actionManager.app.props,

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 {
-  useExcalidrawContainer,
-  useDevice,
-  useExcalidrawSetAppState,
-} from "../components/App";
+import { useExcalidrawContainer, useDevice } 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 setIsLibraryMenuOpen = useSetAtom(isLibraryMenuOpenAtom);
+  const setIsMenuOpen = useSetAtom(isMenuOpenAtom);
+  const setIsDropdownOpen = useSetAtom(isDropdownOpenAtom);
 
   const onClose = () => {
-    setAppState({ openMenu: null });
-    setIsLibraryMenuOpen(false);
+    setIsMenuOpen(false);
+    setIsDropdownOpen(false);
     (lastActiveElement as HTMLElement).focus();
     props.onCloseRequest();
   };

src/components/FixedSideContainer.scss

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

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")}
@@ -230,14 +230,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("helpDialog.zoomToSelection")}
               shortcuts={["Shift+2"]}
             />
-            <Shortcut
-              label={t("helpDialog.movePageUpDown")}
-              shortcuts={["PgUp/PgDn"]}
-            />
-            <Shortcut
-              label={t("helpDialog.movePageLeftRight")}
-              shortcuts={["Shift+PgUp/PgDn"]}
-            />
             <Shortcut label={t("buttons.fullScreen")} shortcuts={["F"]} />
             <Shortcut
               label={t("buttons.zenMode")}

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 });
-  }, [setAppState]);
+    setModalIsShown(false);
+  }, []);
 
   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

@@ -14,10 +14,10 @@ import {
   ExcalidrawProps,
   BinaryFiles,
   UIChildrenComponents,
-  UIWelcomeScreenComponents,
 } from "../types";
-import { muteFSAbortError, getReactChildren } from "../utils";
+import { muteFSAbortError, ReactChildrenToObject } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
+import CollabButton from "./CollabButton";
 import { ErrorDialog } from "./ErrorDialog";
 import { ExportCB, ImageExportDialog } from "./ImageExportDialog";
 import { FixedSideContainer } from "./FixedSideContainer";
@@ -41,24 +41,35 @@ 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 WelcomeScreen from "./welcome-screen/WelcomeScreen";
+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 MainMenu from "./main-menu/MainMenu";
+import { LanguageList } from "../excalidraw-app/components/LanguageList";
+import WelcomeScreenDecor from "./WelcomeScreenDecor";
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
+import MenuItem from "./MenuItem";
 
 interface LayerUIProps {
-  test: JSX.Element;
   actionManager: ActionManager;
   appState: AppState;
   files: BinaryFiles;
   canvas: HTMLCanvasElement | null;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
+  onCollabButtonClick?: () => void;
   onLockToggle: () => void;
   onPenModeToggle: () => void;
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
@@ -85,12 +96,14 @@ const LayerUI = ({
   setAppState,
   elements,
   canvas,
+  onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   onInsertElements,
   showExitZenModeBtn,
   isCollaborating,
   renderTopRightUI,
+
   renderCustomStats,
   renderCustomSidebar,
   libraryReturnUrl,
@@ -104,27 +117,8 @@ const LayerUI = ({
 }: LayerUIProps) => {
   const device = useDevice();
 
-  const [childrenComponents, restChildren] =
-    getReactChildren<UIChildrenComponents>(children, {
-      Menu: true,
-      FooterCenter: true,
-      WelcomeScreen: true,
-    });
-
-  const [WelcomeScreenComponents] = getReactChildren<UIWelcomeScreenComponents>(
-    renderWelcomeScreen
-      ? (
-          childrenComponents?.WelcomeScreen ?? (
-            <WelcomeScreen>
-              <WelcomeScreen.Center />
-              <WelcomeScreen.Hints.MenuHint />
-              <WelcomeScreen.Hints.ToolbarHint />
-              <WelcomeScreen.Hints.HelpHint />
-            </WelcomeScreen>
-          )
-        )?.props?.children
-      : null,
-  );
+  const childrenComponents =
+    ReactChildrenToObject<UIChildrenComponents>(children);
 
   const renderJSONExportDialog = () => {
     if (!UIOptions.canvasActions.export) {
@@ -139,7 +133,6 @@ const LayerUI = ({
         actionManager={actionManager}
         exportOpts={UIOptions.canvasActions.export}
         canvas={canvas}
-        setAppState={setAppState}
       />
     );
   };
@@ -193,37 +186,100 @@ const LayerUI = ({
     );
   };
 
-  const renderMenu = () => {
-    return (
-      childrenComponents.Menu || (
-        <MainMenu>
-          <MainMenu.DefaultItems.LoadScene />
-          <MainMenu.DefaultItems.SaveToActiveFile />
-          {/* FIXME we should to test for this inside the item itself */}
-          {UIOptions.canvasActions.export && <MainMenu.DefaultItems.Export />}
-          {/* FIXME we should to test for this inside the item itself */}
-          {UIOptions.canvasActions.saveAsImage && (
-            <MainMenu.DefaultItems.SaveAsImage />
-          )}
-          <MainMenu.DefaultItems.Help />
-          <MainMenu.DefaultItems.ClearCanvas />
-          <MainMenu.Separator />
-          <MainMenu.Group title="Excalidraw links">
-            <MainMenu.DefaultItems.Socials />
-          </MainMenu.Group>
-          <MainMenu.Separator />
-          <MainMenu.DefaultItems.ToggleTheme />
-          <MainMenu.DefaultItems.ChangeCanvasBackground />
-        </MainMenu>
-      )
-    );
-  };
+  const [isMenuOpen, setIsMenuOpen] = useAtom(isMenuOpenAtom);
+  const menuRef = useOutsideClickHook(() => setIsMenuOpen(false));
+
   const renderCanvasActions = () => (
     <div style={{ position: "relative" }}>
-      {WelcomeScreenComponents.MenuHint}
-      {/* wrapping to Fragment stops React from occasionally complaining
-                about identical Keys */}
-      <>{renderMenu()}</>
+      <WelcomeScreenDecor
+        shouldRender={renderWelcomeScreen && !appState.isLoading}
+      >
+        <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--menu-pointer">
+          {WelcomeScreenMenuArrow}
+          <div>{t("welcomeScreen.menuHints")}</div>
+        </div>
+      </WelcomeScreenDecor>
+
+      <button
+        data-prevent-outside-click
+        className={clsx("menu-button", "zen-mode-transition", {
+          "transition-left": appState.zenModeEnabled,
+        })}
+        onClick={() => setIsMenuOpen(!isMenuOpen)}
+        type="button"
+        data-testid="menu-button"
+      >
+        {HamburgerMenuIcon}
+      </button>
+
+      {isMenuOpen && (
+        <div
+          ref={menuRef}
+          style={{ position: "absolute", top: "100%", marginTop: ".25rem" }}
+        >
+          <Section heading="canvasActions">
+            {/* the zIndex ensures this menu has higher stacking order,
+         see https://github.com/excalidraw/excalidraw/pull/1445 */}
+            <Island
+              className="menu-container"
+              padding={2}
+              style={{ zIndex: 1 }}
+            >
+              {!appState.viewModeEnabled &&
+                actionManager.renderAction("loadScene")}
+              {/* // TODO barnabasmolnar/editor-redesign  */}
+              {/* is this fine here? */}
+              {appState.fileHandle &&
+                actionManager.renderAction("saveToActiveFile")}
+              {renderJSONExportDialog()}
+              {UIOptions.canvasActions.saveAsImage && (
+                <MenuItem
+                  label={t("buttons.exportImage")}
+                  icon={ExportImageIcon}
+                  dataTestId="image-export-button"
+                  onClick={() => setAppState({ openDialog: "imageExport" })}
+                  shortcut={getShortcutFromShortcutName("imageExport")}
+                />
+              )}
+              {onCollabButtonClick && (
+                <CollabButton
+                  isCollaborating={isCollaborating}
+                  collaboratorCount={appState.collaborators.size}
+                  onClick={onCollabButtonClick}
+                />
+              )}
+              {actionManager.renderAction("toggleShortcuts", undefined, true)}
+              {!appState.viewModeEnabled &&
+                actionManager.renderAction("clearCanvas")}
+              <Separator />
+              <MenuLinks />
+              <Separator />
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  rowGap: ".5rem",
+                }}
+              >
+                <div>{actionManager.renderAction("toggleTheme")}</div>
+                <div style={{ padding: "0 0.625rem" }}>
+                  <LanguageList style={{ width: "100%" }} />
+                </div>
+                {!appState.viewModeEnabled && (
+                  <div>
+                    <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+                      {t("labels.canvasBackground")}
+                    </div>
+                    <div style={{ padding: "0 0.625rem" }}>
+                      {actionManager.renderAction("changeViewBackgroundColor")}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </Island>
+          </Section>
+        </div>
+      )}
     </div>
   );
 
@@ -260,7 +316,9 @@ const LayerUI = ({
 
     return (
       <FixedSideContainer side="top">
-        {WelcomeScreenComponents.Center}
+        {renderWelcomeScreen && !appState.isLoading && (
+          <WelcomeScreen appState={appState} actionManager={actionManager} />
+        )}
         <div className="App-menu App-menu_top">
           <Stack.Col
             gap={6}
@@ -275,7 +333,17 @@ const LayerUI = ({
             <Section heading="shapes" className="shapes-section">
               {(heading: React.ReactNode) => (
                 <div style={{ position: "relative" }}>
-                  {WelcomeScreenComponents.ToolbarHint}
+                  <WelcomeScreenDecor
+                    shouldRender={renderWelcomeScreen && !appState.isLoading}
+                  >
+                    <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--top-toolbar-pointer">
+                      <div className="WelcomeScreen-decor--top-toolbar-pointer__label">
+                        {t("welcomeScreen.toolbarHints")}
+                      </div>
+                      {WelcomeScreenTopToolbarArrow}
+                    </div>
+                  </WelcomeScreenDecor>
+
                   <Stack.Col gap={4} align="start">
                     <Stack.Row
                       gap={1}
@@ -342,7 +410,18 @@ const LayerUI = ({
               },
             )}
           >
-            <UserList collaborators={appState.collaborators} />
+            <UserList
+              collaborators={appState.collaborators}
+              actionManager={actionManager}
+            />
+            {onCollabButtonClick && (
+              <CollabButton
+                isInHamburgerMenu={false}
+                isCollaborating={isCollaborating}
+                collaboratorCount={appState.collaborators.size}
+                onClick={onCollabButtonClick}
+              />
+            )}
             {renderTopRightUI?.(device.isMobile, appState)}
             {!appState.viewModeEnabled && (
               <LibraryButton appState={appState} setAppState={setAppState} />
@@ -372,7 +451,6 @@ const LayerUI = ({
 
   return (
     <>
-      {restChildren}
       {appState.isLoading && <LoadingMessage delay={250} />}
       {appState.errorMessage && (
         <ErrorDialog
@@ -388,7 +466,6 @@ const LayerUI = ({
         />
       )}
       {renderImageExportDialog()}
-      {renderJSONExportDialog()}
       {appState.pasteDialog.shown && (
         <PasteChartDialog
           setAppState={setAppState}
@@ -403,22 +480,23 @@ const LayerUI = ({
       )}
       {device.isMobile && (
         <MobileMenu
+          renderWelcomeScreen={renderWelcomeScreen}
           appState={appState}
           elements={elements}
           actionManager={actionManager}
           renderJSONExportDialog={renderJSONExportDialog}
           renderImageExportDialog={renderImageExportDialog}
           setAppState={setAppState}
+          onCollabButtonClick={onCollabButtonClick}
           onLockToggle={() => onLockToggle()}
           onPenModeToggle={onPenModeToggle}
           canvas={canvas}
+          isCollaborating={isCollaborating}
           onImageAction={onImageAction}
           renderTopRightUI={renderTopRightUI}
           renderCustomStats={renderCustomStats}
           renderSidebars={renderSidebars}
           device={device}
-          renderMenu={renderMenu}
-          welcomeScreenCenter={WelcomeScreenComponents.Center}
         />
       )}
 
@@ -443,12 +521,14 @@ const LayerUI = ({
           >
             {renderFixedSideContainer()}
             <Footer
+              renderWelcomeScreen={renderWelcomeScreen}
               appState={appState}
               actionManager={actionManager}
               showExitZenModeBtn={showExitZenModeBtn}
-              footerCenter={childrenComponents.FooterCenter}
-              welcomeScreenHelp={WelcomeScreenComponents.HelpHint}
-            />
+            >
+              {childrenComponents.FooterCenter}
+            </Footer>
+
             {appState.showStats && (
               <Stats
                 appState={appState}

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 DropdownMenu from "./dropdownMenu/DropdownMenu";
-
-export const isLibraryMenuOpenAtom = atom(false);
+import { useOutsideClickHook } from "../hooks/useOutsideClick";
+import MenuItem from "./MenuItem";
+import { isDropdownOpenAtom } from "./App";
 
 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 = () => {
-    return (
-      <DropdownMenu open={isLibraryMenuOpen}>
-        <DropdownMenu.Trigger
-          className="Sidebar__dropdown-btn"
-          onToggle={() => setIsLibraryMenuOpen(!isLibraryMenuOpen)}
-        >
-          {DotsIcon}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          onClickOutside={() => setIsLibraryMenuOpen(false)}
-          className="library-menu"
-        >
-          {!itemsSelected && (
-            <DropdownMenu.Item
-              onSelect={onLibraryImport}
-              icon={LoadIcon}
-              data-testid="lib-dropdown--load"
-            >
-              {t("buttons.load")}
-            </DropdownMenu.Item>
-          )}
-          {!!items.length && (
-            <DropdownMenu.Item
-              onSelect={onLibraryExport}
-              icon={ExportIcon}
-              data-testid="lib-dropdown--export"
-            >
-              {t("buttons.export")}
-            </DropdownMenu.Item>
-          )}
-          {!!items.length && (
-            <DropdownMenu.Item
-              onSelect={() => setShowRemoveLibAlert(true)}
-              icon={TrashIcon}
-            >
-              {resetLabel}
-            </DropdownMenu.Item>
-          )}
-          {itemsSelected && (
-            <DropdownMenu.Item
-              icon={publishIcon}
-              onSelect={() => setShowPublishLibraryDialog(true)}
-              data-testid="lib-dropdown--remove"
-            >
-              {t("buttons.publishLibrary")}
-            </DropdownMenu.Item>
-          )}
-        </DropdownMenu.Content>
-      </DropdownMenu>
-    );
-  };
+  const [isDropdownOpen, setIsDropdownOpen] = useAtom(isDropdownOpenAtom);
+  const dropdownRef = useOutsideClickHook(() => setIsDropdownOpen(false));
+
   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 && (
-        <PublishLibrary
-          onClose={() => setShowPublishLibraryDialog(false)}
-          libraryItems={getSelectedItems(
-            libraryItemsData.libraryItems,
-            selectedItems,
+
+      {isDropdownOpen && (
+        <div
+          className="Sidebar__dropdown-content menu-container"
+          ref={dropdownRef}
+        >
+          {!itemsSelected && (
+            <MenuItem
+              label={t("buttons.load")}
+              icon={LoadIcon}
+              dataTestId="lib-dropdown--load"
+              onClick={onLibraryImport}
+            />
           )}
-          appState={appState}
-          onSuccess={(data) =>
-            onPublishLibSuccess(data, libraryItemsData.libraryItems)
-          }
-          onError={(error) => window.alert(error)}
-          updateItemsInStorage={() =>
-            library.setLibrary(libraryItemsData.libraryItems)
-          }
-          onRemove={(id: string) =>
-            onSelectItems(selectedItems.filter((_id) => _id !== id))
-          }
-        />
+          {showRemoveLibAlert && renderRemoveLibAlert()}
+          {showPublishLibraryDialog && (
+            <PublishLibrary
+              onClose={() => setShowPublishLibraryDialog(false)}
+              libraryItems={getSelectedItems(
+                libraryItemsData.libraryItems,
+                selectedItems,
+              )}
+              appState={appState}
+              onSuccess={(data) =>
+                onPublishLibSuccess(data, libraryItemsData.libraryItems)
+              }
+              onError={(error) => window.alert(error)}
+              updateItemsInStorage={() =>
+                library.setLibrary(libraryItemsData.libraryItems)
+              }
+              onRemove={(id: string) =>
+                onSelectItems(selectedItems.filter((_id) => _id !== id))
+              }
+            />
+          )}
+          {publishLibSuccess && renderPublishSuccess()}
+          {!!items.length && (
+            <>
+              <MenuItem
+                label={t("buttons.export")}
+                icon={ExportIcon}
+                onClick={onLibraryExport}
+                dataTestId="lib-dropdown--export"
+              />
+              <MenuItem
+                label={resetLabel}
+                icon={TrashIcon}
+                onClick={() => setShowRemoveLibAlert(true)}
+                dataTestId="lib-dropdown--remove"
+              />
+            </>
+          )}
+          {itemsSelected && (
+            <MenuItem
+              label={t("buttons.publishLibrary")}
+              icon={publishIcon}
+              dataTestId="lib-dropdown--publish"
+              onClick={() => setShowPublishLibraryDialog(true)}
+            />
+          )}
+        </div>
       )}
-      {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

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  AppState,
-  Device,
-  ExcalidrawProps,
-  UIWelcomeScreenComponents,
-} from "../types";
+import { AppState, Device, ExcalidrawProps } from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -16,12 +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;
@@ -30,9 +31,11 @@ type MobileMenuProps = {
   renderImageExportDialog: () => React.ReactNode;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
+  onCollabButtonClick?: () => void;
   onLockToggle: () => void;
   onPenModeToggle: () => void;
   canvas: HTMLCanvasElement | null;
+  isCollaborating: boolean;
 
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderTopRightUI?: (
@@ -42,30 +45,34 @@ type MobileMenuProps = {
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderSidebars: () => JSX.Element | null;
   device: Device;
-  renderMenu: () => React.ReactNode;
-  welcomeScreenCenter: UIWelcomeScreenComponents["Center"];
+  renderWelcomeScreen?: boolean;
 };
 
 export const MobileMenu = ({
   appState,
   elements,
   actionManager,
+  renderJSONExportDialog,
+  renderImageExportDialog,
   setAppState,
+  onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
   canvas,
+  isCollaborating,
   onImageAction,
   renderTopRightUI,
   renderCustomStats,
   renderSidebars,
   device,
-  renderMenu,
-  welcomeScreenCenter,
+  renderWelcomeScreen,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
       <FixedSideContainer side="top" className="App-top-bar">
-        {welcomeScreenCenter}
+        {renderWelcomeScreen && !appState.isLoading && (
+          <WelcomeScreen appState={appState} actionManager={actionManager} />
+        )}
         <Section heading="shapes">
           {(heading: React.ReactNode) => (
             <Stack.Col gap={4} align="center">
@@ -73,6 +80,20 @@ export const MobileMenu = ({
                 <Island padding={1} className="App-toolbar App-toolbar--mobile">
                   {heading}
                   <Stack.Row gap={1}>
+                    {/* <PenModeButton
+                      checked={appState.penMode}
+                      onChange={onPenModeToggle}
+                      title={t("toolBar.penMode")}
+                      isMobile
+                      penDetected={appState.penDetected}
+                    />
+                    <LockButton
+                      checked={appState.activeTool.locked}
+                      onChange={onLockToggle}
+                      title={t("toolBar.lock")}
+                      isMobile
+                    />
+                    <div className="App-toolbar__divider"></div> */}
                     <ShapesSwitcher
                       appState={appState}
                       canvas={canvas}
@@ -94,6 +115,7 @@ export const MobileMenu = ({
                     title={t("toolBar.penMode")}
                     isMobile
                     penDetected={appState.penDetected}
+                    // penDetected={true}
                   />
                   <LockButton
                     checked={appState.activeTool.locked}
@@ -125,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")}
@@ -142,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()}
@@ -166,9 +244,27 @@ export const MobileMenu = ({
         }}
       >
         <Island padding={0}>
-          {appState.openMenu === "shape" &&
-          !appState.viewModeEnabled &&
-          showSelectedShapeActions(appState, elements) ? (
+          {appState.openMenu === "canvas" ? (
+            <Section className="App-mobile-menu" heading="canvasActions">
+              <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/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 }) => {
-  const actionManager = useExcalidrawActionManager();
-
+  actionManager: ActionManager;
+}> = ({ 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.scss

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

src/components/WelcomeScreen.tsx

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

src/components/WelcomeScreenDecor.tsx

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

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-bg);
-        text-decoration: none;
-      }
-
-      svg {
-        width: 1rem;
-        height: 1rem;
-        display: block;
-      }
-    }
-
-    .dropdown-menu-item-custom {
-      margin-top: 0.5rem;
-    }
-
-    .dropdown-menu-group-title {
-      font-size: 14px;
-      text-align: left;
-      margin: 10px 0;
-      font-weight: 500;
-    }
-  }
-  &.theme--dark {
-    .dropdown-menu-item {
-      color: var(--color-gray-40);
-    }
-
-    .dropdown-menu-container {
-      background-color: var(--color-gray-90) !important;
-    }
-  }
-
-  .dropdown-menu-button {
-    @include outlineButtonStyles;
-    background-color: var(--island-bg-color);
-    width: var(--lg-button-size);
-    height: var(--lg-button-size);
-
-    svg {
-      width: var(--lg-icon-size);
-      height: var(--lg-icon-size);
-    }
-
-    &--mobile {
-      border: none;
-      margin: 0;
-      padding: 0;
-      width: var(--default-button-size);
-      height: var(--default-button-size);
-    }
-  }
-}

src/components/dropdownMenu/DropdownMenu.tsx

@@ -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,38 +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,
-  shortcut,
-  className,
-  ...rest
-}: {
-  icon?: JSX.Element;
-  onSelect: () => void;
-  children: React.ReactNode;
-  shortcut?: string;
-  className?: string;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
-  return (
-    <button
-      {...rest}
-      onClick={onSelect}
-      type="button"
-      className={getDrodownMenuItemClassName(className)}
-      title={rest.title ?? rest["aria-label"]}
-    >
-      <MenuItemContent icon={icon} shortcut={shortcut}>
-        {children}
-      </MenuItemContent>
-    </button>
-  );
-};
-
-export default DropdownMenuItem;
-DropdownMenuItem.displayName = "DropdownMenuItem";

src/components/dropdownMenu/DropdownMenuItemContent.tsx

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

src/components/dropdownMenu/DropdownMenuItemLink.tsx

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

src/components/dropdownMenu/DropdownMenuSeparator.tsx

@@ -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,11 +1,7 @@
 import clsx from "clsx";
-import { actionShortcuts } from "../../actions";
 import { ActionManager } from "../../actions/manager";
-import {
-  AppState,
-  UIChildrenComponents,
-  UIWelcomeScreenComponents,
-} from "../../types";
+import { t } from "../../i18n";
+import { AppState } from "../../types";
 import {
   ExitZenModeAction,
   FinalizeAction,
@@ -13,22 +9,24 @@ import {
   ZoomActions,
 } from "../Actions";
 import { useDevice } from "../App";
-import { HelpButton } from "../HelpButton";
+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,
-  footerCenter,
-  welcomeScreenHelp,
+  renderWelcomeScreen,
+  children,
 }: {
   appState: AppState;
   actionManager: ActionManager;
   showExitZenModeBtn: boolean;
-  footerCenter: UIChildrenComponents["FooterCenter"];
-  welcomeScreenHelp: UIWelcomeScreenComponents["HelpHint"];
+  renderWelcomeScreen: boolean;
+  children?: React.ReactNode;
 }) => {
   const device = useDevice();
   const showFinalize =
@@ -73,17 +71,23 @@ 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,
         })}
       >
         <div style={{ position: "relative" }}>
-          {welcomeScreenHelp}
-          <HelpButton
-            onClick={() => actionManager.executeAction(actionShortcuts)}
-          />
+          <WelcomeScreenDecor
+            shouldRender={renderWelcomeScreen && !appState.isLoading}
+          >
+            <div className="virgil WelcomeScreen-decor WelcomeScreen-decor--help-pointer">
+              <div>{t("welcomeScreen.helpHints")}</div>
+              {WelcomeScreenHelpArrow}
+            </div>
+          </WelcomeScreenDecor>
+
+          {actionManager.renderAction("toggleShortcuts")}
         </div>
       </div>
       <ExitZenModeAction

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/icons.tsx

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

src/components/live-collaboration/LiveCollaborationTrigger.tsx

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

src/components/main-menu/DefaultItems.tsx

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

src/components/main-menu/MainMenu.tsx

@@ -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/components/welcome-screen/WelcomeScreen.Center.tsx

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

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

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

src/components/welcome-screen/WelcomeScreen.tsx

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

src/constants.ts

@@ -150,7 +150,6 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
     toggleTheme: null,
     saveAsImage: true,
   },
-  welcomeScreen: true,
 };
 
 // breakpoints
@@ -237,6 +236,14 @@ export const ROUNDNESS = {
   ADAPTIVE_RADIUS: 3,
 } as const;
 
+export const COOKIES = {
+  AUTH_STATE_COOKIE: "excplus-auth",
+} as const;
+
 /** key containt id of precedeing elemnt id we use in reconciliation during
  * collaboration */
 export const PRECEDING_ELEMENT_KEY = "__precedingElement__";
+
+export const isExcalidrawPlusSignedUser = document.cookie.includes(
+  COOKIES.AUTH_STATE_COOKIE,
+);

src/css/styles.scss

@@ -408,7 +408,7 @@
     pointer-events: all;
 
     &:hover {
-      background-color: var(--button-hover-bg);
+      background-color: var(--button-hover);
     }
 
     &:active {
@@ -540,9 +540,9 @@
   }
 
   .mobile-misc-tools-container {
-    position: absolute;
-    top: calc(5rem - var(--editor-container-padding));
-    right: calc(var(--editor-container-padding) * -1);
+    position: fixed;
+    top: 5rem;
+    right: 0;
     display: flex;
     flex-direction: column;
     border: 1px solid var(--sidebar-border-color);
@@ -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/css/theme.scss

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

src/css/variables.module.scss

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

src/element/Hyperlink.tsx

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

src/element/resizeElements.ts

@@ -557,10 +557,10 @@ export const resizeSingleElement = (
     mutateElement(element, {
       scale: [
         // defaulting because scaleX/Y can be 0/-0
-        (Math.sign(newBoundsX2 - stateAtResizeStart.x) ||
-          stateAtResizeStart.scale[0]) * stateAtResizeStart.scale[0],
-        (Math.sign(newBoundsY2 - stateAtResizeStart.y) ||
-          stateAtResizeStart.scale[1]) * stateAtResizeStart.scale[1],
+        (Math.sign(scaleX) || stateAtResizeStart.scale[0]) *
+          stateAtResizeStart.scale[0],
+        (Math.sign(scaleY) || stateAtResizeStart.scale[1]) *
+          stateAtResizeStart.scale[1],
       ],
     });
   }

src/element/textWysiwyg.tsx

@@ -325,6 +325,8 @@ export const textWysiwyg = ({
     whiteSpace = "pre-wrap";
     wordBreak = "break-word";
   }
+  const isContainerArrow = isArrowElement(getContainerElement(element));
+  const background = isContainerArrow ? "#fff" : "transparent";
   Object.assign(editable.style, {
     position: "absolute",
     display: "inline-block",
@@ -335,7 +337,7 @@ export const textWysiwyg = ({
     border: 0,
     outline: 0,
     resize: "none",
-    background: "transparent",
+    background,
     overflow: "hidden",
     // must be specified because in dark mode canvas creates a stacking context
     zIndex: "var(--zIndex-wysiwyg)",

src/excalidraw-app/app_constants.ts

@@ -38,11 +38,3 @@ export const STORAGE_KEYS = {
   VERSION_DATA_STATE: "version-dataState",
   VERSION_FILES: "version-files",
 } as const;
-
-export const COOKIES = {
-  AUTH_STATE_COOKIE: "excplus-auth",
-} as const;
-
-export const isExcalidrawPlusSignedUser = document.cookie.includes(
-  COOKIES.AUTH_STATE_COOKIE,
-);

src/excalidraw-app/collab/Collab.tsx

@@ -242,12 +242,6 @@ class Collab extends PureComponent<Props, CollabState> {
         );
       }
     } catch (error: any) {
-      this.setState({
-        // firestore doesn't return a specific error code when size exceeded
-        errorMessage: /is longer than.*?bytes/.test(error.message)
-          ? t("errors.collabSaveFailed_sizeExceeded")
-          : t("errors.collabSaveFailed"),
-      });
       console.error(error);
     }
   };

src/excalidraw-app/components/ExcalidrawPlusAppLink.tsx

@@ -1,4 +1,4 @@
-import { isExcalidrawPlusSignedUser } from "../app_constants";
+import { isExcalidrawPlusSignedUser } from "../../constants";
 
 export const ExcalidrawPlusAppLink = () => {
   if (!isExcalidrawPlusSignedUser) {

src/excalidraw-app/components/LanguageList.tsx

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

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

@@ -1,6 +1,6 @@
 import polyfill from "../polyfill";
 import LanguageDetector from "i18next-browser-languagedetector";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { trackEvent } from "../analytics";
 import { getDefaultAppState } from "../appState";
 import { ErrorDialog } from "../components/ErrorDialog";
@@ -21,14 +21,7 @@ import {
 } from "../element/types";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import {
-  Excalidraw,
-  defaultLang,
-  Footer,
-  MainMenu,
-  LiveCollaborationTrigger,
-  WelcomeScreen,
-} from "../packages/excalidraw/index";
+import { Excalidraw, defaultLang, Footer } from "../packages/excalidraw/index";
 import {
   AppState,
   LibraryItems,
@@ -47,7 +40,6 @@ import {
 } from "../utils";
 import {
   FIREBASE_STORAGE_PREFIXES,
-  isExcalidrawPlusSignedUser,
   STORAGE_KEYS,
   SYNC_BROWSER_TABS_TIMEOUT,
 } from "./app_constants";
@@ -87,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();
@@ -240,6 +229,7 @@ export const langCodeAtom = atom(
 const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const [langCode, setLangCode] = useAtom(langCodeAtom);
+
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -604,96 +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.LiveCollaborationTrigger
-          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>
-    );
-  };
-
-  const welcomeScreenJSX = useMemo(() => {
-    let headingContent;
-
-    if (isExcalidrawPlusSignedUser) {
-      headingContent = t("welcomeScreen.app.center_heading_plus")
-        .split(/(Excalidraw\+)/)
-        .map((bit, idx) => {
-          if (bit === "Excalidraw+") {
-            return (
-              <a
-                style={{ pointerEvents: "all" }}
-                href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenSignedInUser`}
-                key={idx}
-              >
-                Excalidraw+
-              </a>
-            );
-          }
-          return bit;
-        });
-    } else {
-      headingContent = t("welcomeScreen.app.center_heading");
-    }
-
-    return (
-      <WelcomeScreen>
-        <WelcomeScreen.Hints.MenuHint>
-          {t("welcomeScreen.app.menuHint")}
-        </WelcomeScreen.Hints.MenuHint>
-        <WelcomeScreen.Hints.ToolbarHint />
-        <WelcomeScreen.Hints.HelpHint />
-        <WelcomeScreen.Center>
-          <WelcomeScreen.Center.Logo />
-          <WelcomeScreen.Center.Heading>
-            {headingContent}
-          </WelcomeScreen.Center.Heading>
-          <WelcomeScreen.Center.Menu>
-            <WelcomeScreen.Center.MenuItemLoadScene />
-            <WelcomeScreen.Center.MenuItemHelp />
-            <WelcomeScreen.Center.MenuItemLiveCollaborationTrigger
-              onSelect={() => setCollabDialogShown(true)}
-            />
-            {!isExcalidrawPlusSignedUser && (
-              <WelcomeScreen.Center.MenuItemLink
-                href="https://plus.excalidraw.com/plus?utm_source=excalidraw&utm_medium=app&utm_content=welcomeScreenGuest"
-                shortcut={null}
-                icon={PlusPromoIcon}
-              >
-                Try Excalidraw Plus!
-              </WelcomeScreen.Center.MenuItemLink>
-            )}
-          </WelcomeScreen.Center.Menu>
-        </WelcomeScreen.Center>
-      </WelcomeScreen>
-    );
-  }, [setCollabDialogShown]);
-
   return (
     <div
       style={{ height: "100%" }}
@@ -705,6 +605,7 @@ const ExcalidrawWrapper = () => {
         ref={excalidrawRefCallback}
         onChange={onChange}
         initialData={initialStatePromiseRef.current.promise}
+        onCollabButtonClick={() => setCollabDialogShown(true)}
         isCollaborating={isCollaborating}
         onPointerUpdate={collabAPI?.onPointerUpdate}
         UIOptions={{
@@ -738,27 +639,13 @@ const ExcalidrawWrapper = () => {
         onLibraryChange={onLibraryChange}
         autoFocus={true}
         theme={theme}
-        renderTopRightUI={(isMobile) => {
-          if (isMobile) {
-            return null;
-          }
-          return (
-            <LiveCollaborationTrigger
-              isCollaborating={isCollaborating}
-              onSelect={() => setCollabDialogShown(true)}
-            />
-          );
-        }}
       >
-        {renderMenu()}
-
         <Footer>
           <div style={{ display: "flex", gap: ".5rem", alignItems: "center" }}>
             <ExcalidrawPlusAppLink />
             <EncryptedIcon />
           </div>
         </Footer>
-        {welcomeScreenJSX}
       </Excalidraw>
       {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (

src/keys.ts

@@ -29,8 +29,6 @@ export const KEYS = {
   ARROW_LEFT: "ArrowLeft",
   ARROW_RIGHT: "ArrowRight",
   ARROW_UP: "ArrowUp",
-  PAGE_UP: "PageUp",
-  PAGE_DOWN: "PageDown",
   BACKSPACE: "Backspace",
   ALT: "Alt",
   CTRL_OR_CMD: isDarwin ? "metaKey" : "ctrlKey",

src/locales/ar-SA.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "لصق",
-    "pasteAsPlaintext": "",
     "pasteCharts": "لصق الرسوم البيانية",
     "selectAll": "تحديد الكل",
     "multiSelect": "إضافة عنصر للتحديد",
@@ -72,7 +71,7 @@
     "layers": "الطبقات",
     "actions": "الإجراءات",
     "language": "اللغة",
-    "liveCollaboration": "",
+    "liveCollaboration": "بدء المشاركة الحية",
     "duplicateSelection": "تكرار",
     "untitled": "غير معنون",
     "name": "الاسم",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "إعادة تعيين اللوحة",
     "exportJSON": "صدر الملف",
-    "exportImage": "",
-    "export": "",
+    "exportImage": "إحفظ كصورة",
+    "export": "تصدير",
     "exportToPng": "تصدير بصيغة PNG",
     "exportToSvg": "تصدير بصيغة SVG",
     "copyToClipboard": "نسخ إلى الحافظة",
@@ -145,7 +144,7 @@
     "scale": "مقاس",
     "save": "احفظ للملف الحالي",
     "saveAs": "حفظ كـ",
-    "load": "",
+    "load": "تحميل",
     "getShareableLink": "احصل على رابط المشاركة",
     "close": "غلق",
     "selectLanguage": "اختر اللغة",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "تعذر إدراج صورة SVG. يبدو أن ترميز SVG غير صحيح.",
     "invalidSVGString": "SVG غير صالح.",
     "cannotResolveCollabServer": "",
-    "importLibraryError": "",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "تحديد",
@@ -238,7 +235,7 @@
     "resize": "يمكنك تقييد النسب بالضغط على SHIFT أثناء تغيير الحجم،\nاضغط على ALT لتغيير الحجم من المركز",
     "resizeImage": "يمكنك تغيير الحجم بحرية بالضغط بأستمرار على SHIFT،\nاضغط بأستمرار على ALT أيضا لتغيير الحجم من المركز",
     "rotate": "يمكنك تقييد الزوايا من خلال الضغط على SHIFT أثناء الدوران",
-    "lineEditor_info": "",
+    "lineEditor_info": "انقر نقراً مزدوجاً أو اضغط Enter لتعديل النقاط",
     "lineEditor_pointSelected": "",
     "lineEditor_nothingSelected": "",
     "placeImage": "",
@@ -313,9 +310,7 @@
     "view": "عرض",
     "zoomToFit": "تكبير للملائمة",
     "zoomToSelection": "تكبير للعنصر المحدد",
-    "toggleElementLock": "",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": ""
   },
   "clearCanvasDialog": {
     "title": "مسح اللوحة"
@@ -396,8 +391,7 @@
     "fileSaved": "تم حفظ الملف.",
     "fileSavedToFilename": "حفظ باسم {filename}",
     "canvas": "لوحة الرسم",
-    "selection": "العنصر المحدد",
-    "pasteAsSingleElement": ""
+    "selection": "العنصر المحدد"
   },
   "colors": {
     "ffffff": "أبيض",
@@ -445,12 +439,5 @@
     "5c940d": "ليموني 9",
     "e67700": "أصفر 9",
     "d9480f": "برتقالي 9"
-  },
-  "welcomeScreen": {
-    "data": "",
-    "switchToPlusApp": "",
-    "menuHints": "",
-    "toolbarHints": "",
-    "helpHints": ""
   }
 }

src/locales/bg-BG.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Постави",
-    "pasteAsPlaintext": "",
     "pasteCharts": "Постави графики",
     "selectAll": "Маркирай всичко",
     "multiSelect": "Добави елемент към селекция",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Нулиране на платно",
     "exportJSON": "",
-    "exportImage": "",
-    "export": "",
+    "exportImage": "Запиши като изображение",
+    "export": "Експортиране",
     "exportToPng": "Изнасяне в PNG",
     "exportToSvg": "Изнасяне в SVG",
     "copyToClipboard": "Копиране в клипборда",
@@ -145,7 +144,7 @@
     "scale": "Мащаб",
     "save": "",
     "saveAs": "Запиши като",
-    "load": "",
+    "load": "Зареждане",
     "getShareableLink": "Получаване на връзка за споделяне",
     "close": "Затвори",
     "selectLanguage": "Избор на език",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "",
     "invalidSVGString": "",
     "cannotResolveCollabServer": "",
-    "importLibraryError": "",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Селекция",
@@ -238,7 +235,7 @@
     "resize": "Може да ограничите при преоразмеряване като задържите SHIFT,\nзадръжте ALT за преоразмерите през центъра",
     "resizeImage": "",
     "rotate": "Можете да ограничите ъглите, като държите SHIFT, докато се въртите",
-    "lineEditor_info": "",
+    "lineEditor_info": "Кликнете два пъти или натиснете Enter за да промените точките",
     "lineEditor_pointSelected": "Натиснете Delete за да изтриете точка(и), CtrlOrCmd+D за дуплициране, или извлачете за да преместите",
     "lineEditor_nothingSelected": "",
     "placeImage": "",
@@ -313,9 +310,7 @@
     "view": "Преглед",
     "zoomToFit": "Приближи докато се виждат всички елементи",
     "zoomToSelection": "Приближи селекцията",
-    "toggleElementLock": "",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": ""
   },
   "clearCanvasDialog": {
     "title": ""
@@ -396,8 +391,7 @@
     "fileSaved": "",
     "fileSavedToFilename": "",
     "canvas": "",
-    "selection": "",
-    "pasteAsSingleElement": ""
+    "selection": ""
   },
   "colors": {
     "ffffff": "",
@@ -445,12 +439,5 @@
     "5c940d": "",
     "e67700": "",
     "d9480f": ""
-  },
-  "welcomeScreen": {
-    "data": "",
-    "switchToPlusApp": "",
-    "menuHints": "",
-    "toolbarHints": "",
-    "helpHints": ""
   }
 }

src/locales/bn-BD.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "পেস্ট করুন",
-    "pasteAsPlaintext": "",
     "pasteCharts": "চার্ট পেস্ট করুন",
     "selectAll": "সবটা সিলেক্ট করুন",
     "multiSelect": "একাধিক সিলেক্ট করুন",
@@ -72,7 +71,7 @@
     "layers": "মাত্রা",
     "actions": "ক্রিয়া",
     "language": "ভাষা",
-    "liveCollaboration": "",
+    "liveCollaboration": "যুগ্ম কার্য",
     "duplicateSelection": "সদৃশ সিলেক্ট",
     "untitled": "অনামী",
     "name": "নাম",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "ক্যানভাস সাফ করুন",
     "exportJSON": "জেসন নিবদ্ধ করুন",
-    "exportImage": "",
-    "export": "",
+    "exportImage": "চিত্র নিবদ্ধ করুন",
+    "export": "নিবদ্ধ",
     "exportToPng": "পীএনজী ছবির মতন নিবদ্ধ করুন",
     "exportToSvg": "এসভীজী ছবির মতন নিবদ্ধ করুন",
     "copyToClipboard": "ক্লিপবোর্ডে কপি করুন",
@@ -145,7 +144,7 @@
     "scale": "মাপ",
     "save": "জমা করুন",
     "saveAs": "অন্যভাবে জমা করুন",
-    "load": "",
+    "load": "লোড করুন",
     "getShareableLink": "ভাগযোগ্য লিঙ্ক পান",
     "close": "বন্ধ করুন",
     "selectLanguage": "ভাষা চিহ্নিত করুন",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "এসভীজী ছবি সন্নিবেশ করা যায়নি। এসভীজী মার্কআপটি অবৈধ মনে হচ্ছে৷",
     "invalidSVGString": "এসভীজী মার্কআপটি অবৈধ মনে হচ্ছে৷",
     "cannotResolveCollabServer": "কোল্যাব সার্ভারের সাথে সংযোগ করা যায়নি। পৃষ্ঠাটি পুনরায় লোড করে আবার চেষ্টা করুন।",
-    "importLibraryError": "সংগ্রহ লোড করা যায়নি",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": "সংগ্রহ লোড করা যায়নি"
   },
   "toolBar": {
     "selection": "বাছাই",
@@ -217,7 +214,7 @@
     "text": "লেখা",
     "library": "সংগ্রহ",
     "lock": "আঁকার পরে নির্বাচিত টুল সক্রিয় রাখুন",
-    "penMode": "",
+    "penMode": "পিঞ্চ-জুম প্রতিরোধ করুন এবং শুধুমাত্র কলম থেকে ইনপুট গ্রহণ করুন",
     "link": "একটি নির্বাচিত আকৃতির জন্য লিঙ্ক যোগ বা আপডেট করুন",
     "eraser": "ঝাড়ন"
   },
@@ -238,7 +235,7 @@
     "resize": "আপনি আকার পরিবর্তন করার সময় শিফ্ট ধরে রেখে অনুপাতকে সীমাবদ্ধ করতে পারেন,\nকেন্দ্র থেকে আকার পরিবর্তন করতে অল্ট ধরে রাখুন",
     "resizeImage": "আপনি শিফ্ট ধরে রেখে অবাধে আকার পরিবর্তন করতে পারেন, কেন্দ্র থেকে আকার পরিবর্তন করতে অল্ট ধরুন",
     "rotate": "আপনি ঘোরানোর সময় শিফ্ট ধরে রেখে কোণগুলিকে সীমাবদ্ধ করতে পারেন",
-    "lineEditor_info": "",
+    "lineEditor_info": "পয়েন্ট সম্পাদনা করতে ডাবল-ক্লিক করুন বা এন্টার টিপুন",
     "lineEditor_pointSelected": "বিন্দু(গুলি) মুছতে ডিলিট টিপুন, কন্ট্রোল/কম্যান্ড যোগে ডি টিপুন নকল করতে অথবা সরানোর জন্য টানুন",
     "lineEditor_nothingSelected": "সম্পাদনা করার জন্য একটি বিন্দু নির্বাচন করুন (একাধিক নির্বাচন করতে শিফ্ট ধরে রাখুন),\nঅথবা অল্ট ধরে রাখুন এবং নতুন বিন্দু যোগ করতে ক্লিক করুন",
     "placeImage": "ছবিটি স্থাপন করতে ক্লিক করুন, অথবা নিজে আকার সেট করতে ক্লিক করুন এবং টেনে আনুন",
@@ -313,9 +310,7 @@
     "view": "",
     "zoomToFit": "",
     "zoomToSelection": "",
-    "toggleElementLock": "",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": ""
   },
   "clearCanvasDialog": {
     "title": ""
@@ -396,8 +391,7 @@
     "fileSaved": "",
     "fileSavedToFilename": "",
     "canvas": "",
-    "selection": "বাছাই",
-    "pasteAsSingleElement": ""
+    "selection": "বাছাই"
   },
   "colors": {
     "ffffff": "সাদা",
@@ -445,12 +439,5 @@
     "5c940d": "",
     "e67700": "",
     "d9480f": ""
-  },
-  "welcomeScreen": {
-    "data": "",
-    "switchToPlusApp": "",
-    "menuHints": "",
-    "toolbarHints": "",
-    "helpHints": ""
   }
 }

src/locales/ca-ES.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Enganxa",
-    "pasteAsPlaintext": "",
     "pasteCharts": "Enganxa els diagrames",
     "selectAll": "Selecciona-ho tot",
     "multiSelect": "Afegeix un element a la selecció",
@@ -72,7 +71,7 @@
     "layers": "Capes",
     "actions": "Accions",
     "language": "Llengua",
-    "liveCollaboration": "",
+    "liveCollaboration": "Col·laboració en directe",
     "duplicateSelection": "Duplica",
     "untitled": "Sense títol",
     "name": "Nom",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Neteja el llenç",
     "exportJSON": "Exporta a un fitxer",
-    "exportImage": "",
-    "export": "",
+    "exportImage": "Desa com a imatge",
+    "export": "Exporta",
     "exportToPng": "Exporta a PNG",
     "exportToSvg": "Exporta a SNG",
     "copyToClipboard": "Copia al porta-retalls",
@@ -145,7 +144,7 @@
     "scale": "Escala",
     "save": "Desa al fitxer actual",
     "saveAs": "Anomena i desa",
-    "load": "",
+    "load": "Carrega",
     "getShareableLink": "Obté l'enllaç per a compartir",
     "close": "Tanca",
     "selectLanguage": "Trieu la llengua",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "No ha estat possible inserir la imatge SVG. Les marques SVG semblen invàlides.",
     "invalidSVGString": "SVG no vàlid.",
     "cannotResolveCollabServer": "No ha estat possible connectar amb el servidor collab. Si us plau recarregueu la pàgina i torneu a provar.",
-    "importLibraryError": "No s'ha pogut carregar la biblioteca",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": "No s'ha pogut carregar la biblioteca"
   },
   "toolBar": {
     "selection": "Selecció",
@@ -217,7 +214,7 @@
     "text": "Text",
     "library": "Biblioteca",
     "lock": "Mantenir activa l'eina seleccionada desprès de dibuixar",
-    "penMode": "",
+    "penMode": "Evita el zoom i accepta solament el dibuix lliure amb bolígraf",
     "link": "Afegeix / actualitza l'enllaç per a la forma seleccionada",
     "eraser": "Esborrador"
   },
@@ -238,7 +235,7 @@
     "resize": "Per restringir les proporcions mentres es canvia la mida, mantenir premut el majúscul (SHIFT); per canviar la mida des del centre, mantenir premut ALT",
     "resizeImage": "Podeu redimensionar lliurement prement MAJÚSCULA;\nper a redimensionar des del centre, premeu ALT",
     "rotate": "Per restringir els angles mentre gira, mantenir premut el majúscul (SHIFT)",
-    "lineEditor_info": "",
+    "lineEditor_info": "Fes doble clic o premi Enter per editar punts",
     "lineEditor_pointSelected": "Premeu Suprimir per a eliminar el(s) punt(s), CtrlOrCmd+D per a duplicar-lo, o arrossegueu-lo per a moure'l",
     "lineEditor_nothingSelected": "Seleccioneu un punt per a editar-lo (premeu SHIFT si voleu\nselecció múltiple), o manteniu Alt i feu clic per a afegir més punts",
     "placeImage": "Feu clic per a col·locar la imatge o clic i arrossegar per a establir-ne la mida manualment",
@@ -313,9 +310,7 @@
     "view": "Visualització",
     "zoomToFit": "Zoom per veure tots els elements",
     "zoomToSelection": "Zoom per veure la selecció",
-    "toggleElementLock": "Blocar/desblocar la selecció",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": "Blocar/desblocar la selecció"
   },
   "clearCanvasDialog": {
     "title": "Neteja el llenç"
@@ -396,8 +391,7 @@
     "fileSaved": "S'ha desat el fitxer.",
     "fileSavedToFilename": "S'ha desat a {filename}",
     "canvas": "el llenç",
-    "selection": "la selecció",
-    "pasteAsSingleElement": ""
+    "selection": "la selecció"
   },
   "colors": {
     "ffffff": "Blanc",
@@ -445,12 +439,5 @@
     "5c940d": "Llima 9",
     "e67700": "Groc 9",
     "d9480f": "Taronja 9"
-  },
-  "welcomeScreen": {
-    "data": "",
-    "switchToPlusApp": "",
-    "menuHints": "",
-    "toolbarHints": "",
-    "helpHints": ""
   }
 }

src/locales/cs-CZ.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Vložit",
-    "pasteAsPlaintext": "",
     "pasteCharts": "Vložit grafy",
     "selectAll": "Vybrat vše",
     "multiSelect": "Přidat prvek do výběru",
@@ -61,18 +60,18 @@
     "center": "Na střed",
     "right": "Vpravo",
     "extraBold": "Extra tlustý",
-    "architect": "Architekt",
-    "artist": "Umělec",
+    "architect": "",
+    "artist": "",
     "cartoonist": "",
     "fileTitle": "Název souboru",
     "colorPicker": "Výběr barvy",
-    "canvasColors": "Použito na plátně",
+    "canvasColors": "",
     "canvasBackground": "Pozadí plátna",
-    "drawingCanvas": "Kreslicí plátno",
+    "drawingCanvas": "",
     "layers": "Vrstvy",
     "actions": "Akce",
     "language": "Jazyk",
-    "liveCollaboration": "Živá spolupráce...",
+    "liveCollaboration": "Živá spolupráce",
     "duplicateSelection": "Duplikovat",
     "untitled": "Bez názvu",
     "name": "Název",
@@ -99,57 +98,57 @@
     "flipHorizontal": "Převrátit vodorovně",
     "flipVertical": "Převrátit svisle",
     "viewMode": "Náhled",
-    "toggleExportColorScheme": "Přepnout exportování barevného schématu",
+    "toggleExportColorScheme": "",
     "share": "Sdílet",
-    "showStroke": "Zobrazit výběr barvy",
-    "showBackground": "Zobrazit výběr barev pozadí",
+    "showStroke": "",
+    "showBackground": "",
     "toggleTheme": "Přepnout tmavý řežim",
-    "personalLib": "Osobní knihovna",
-    "excalidrawLib": "Exkalidraw knihovna",
-    "decreaseFontSize": "Zmenšit písmo",
-    "increaseFontSize": "Zvětšit písmo",
-    "unbindText": "Zrušit vazbu textu",
-    "bindText": "Vázat text s kontejnerem",
+    "personalLib": "",
+    "excalidrawLib": "",
+    "decreaseFontSize": "",
+    "increaseFontSize": "",
+    "unbindText": "",
+    "bindText": "",
     "link": {
-      "edit": "Upravit odkaz",
-      "create": "Vytvořit odkaz",
-      "label": "Odkaz"
+      "edit": "",
+      "create": "",
+      "label": ""
     },
     "lineEditor": {
-      "edit": "Upravit čáru",
-      "exit": "Ukončit editor řádků"
+      "edit": "",
+      "exit": ""
     },
     "elementLock": {
-      "lock": "Uzamknout",
-      "unlock": "Odemknout",
-      "lockAll": "Uzamknout vše",
-      "unlockAll": "Odemknout vše"
+      "lock": "",
+      "unlock": "",
+      "lockAll": "",
+      "unlockAll": ""
     },
-    "statusPublished": "Zveřejněno",
-    "sidebarLock": "Ponechat postranní panel otevřený"
+    "statusPublished": "",
+    "sidebarLock": ""
   },
   "library": {
-    "noItems": "Dosud neexistují žádné položky...",
-    "hint_emptyLibrary": "Vyberte položku na plátně a přidejte ji sem nebo nainstalujte knihovnu z veřejného úložiště níže.",
-    "hint_emptyPrivateLibrary": "Vyberte položku na plátně a přidejte ji sem."
+    "noItems": "",
+    "hint_emptyLibrary": "",
+    "hint_emptyPrivateLibrary": ""
   },
   "buttons": {
-    "clearReset": "Resetovat plátno",
-    "exportJSON": "Exportovat do souboru",
-    "exportImage": "Exportovat obrázek...",
-    "export": "Uložit jako...",
+    "clearReset": "",
+    "exportJSON": "",
+    "exportImage": "",
+    "export": "Exportovat",
     "exportToPng": "Exportovat do PNG",
     "exportToSvg": "Exportovat do SVG",
     "copyToClipboard": "Kopírovat do schránky",
     "copyPngToClipboard": "Kopírovat PNG do schránky",
     "scale": "Měřítko",
-    "save": "Uložit do aktuálního souboru",
+    "save": "",
     "saveAs": "Uložit jako",
-    "load": "Otevřít",
+    "load": "Nahrát",
     "getShareableLink": "Získat odkaz pro sdílení",
     "close": "Zavřít",
     "selectLanguage": "Zvolit jazyk",
-    "scrollBackToContent": "Přejít zpět na obsah",
+    "scrollBackToContent": "",
     "zoomIn": "Přiblížit",
     "zoomOut": "Oddálit",
     "resetZoom": "Resetovat přiblížení",
@@ -158,7 +157,7 @@
     "edit": "Upravit",
     "undo": "Zpět",
     "redo": "Znovu",
-    "resetLibrary": "Obnovit knihovnu",
+    "resetLibrary": "",
     "createNewRoom": "Vytvořit novou místnost",
     "fullScreen": "Celá obrazovka",
     "darkMode": "Tmavý režim",
@@ -177,17 +176,17 @@
     "couldNotCreateShareableLink": "Nepodařilo se vytvořit sdílitelný odkaz.",
     "couldNotCreateShareableLinkTooBig": "Nepodařilo se vytvořit sdílený odkaz: scéna je příliš velká",
     "couldNotLoadInvalidFile": "Nepodařilo se načíst neplatný soubor",
-    "importBackendFailed": "Import z backendu se nezdařil.",
-    "cannotExportEmptyCanvas": "Nelze exportovat prázdné plátno.",
-    "couldNotCopyToClipboard": "Nelze zkopírovat do schránky.",
-    "decryptFailed": "Nelze dešifrovat data.",
-    "uploadedSecurly": "Nahrávání je zabezpečeno koncovým šifrováním, což znamená, že server Excalidraw ani třetí strany nemohou obsah přečíst.",
-    "loadSceneOverridePrompt": "Načítání externího výkresu nahradí váš existující obsah. Přejete si pokračovat?",
+    "importBackendFailed": "",
+    "cannotExportEmptyCanvas": "",
+    "couldNotCopyToClipboard": "",
+    "decryptFailed": "",
+    "uploadedSecurly": "",
+    "loadSceneOverridePrompt": "",
     "collabStopOverridePrompt": "",
-    "errorAddingToLibrary": "Položku nelze přidat do knihovny",
-    "errorRemovingFromLibrary": "Položku nelze odstranit z knihovny",
-    "confirmAddLibrary": "Tímto přidáte {{numShapes}} tvarů do tvé knihovny. Jste si jisti?",
-    "imageDoesNotContainScene": "Zdá se, že tento obrázek neobsahuje žádná data o scéně. Zapnuli jste při exportu vkládání scény?",
+    "errorAddingToLibrary": "",
+    "errorRemovingFromLibrary": "",
+    "confirmAddLibrary": "",
+    "imageDoesNotContainScene": "",
     "cannotRestoreFromImage": "",
     "invalidSceneUrl": "",
     "resetLibrary": "",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "",
     "invalidSVGString": "",
     "cannotResolveCollabServer": "",
-    "importLibraryError": "",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Výběr",
@@ -258,8 +255,8 @@
     "clearCanvasMessage": "",
     "clearCanvasMessage_button": "",
     "clearCanvasCaveat": "",
-    "trackedToSentry_pre": "Chyba identifikátoru ",
-    "trackedToSentry_post": " byl zaznamenán v našem systému.",
+    "trackedToSentry_pre": "",
+    "trackedToSentry_post": "",
     "openIssueMessage_pre": "",
     "openIssueMessage_button": "",
     "openIssueMessage_post": "",
@@ -313,9 +310,7 @@
     "view": "Zobrazení",
     "zoomToFit": "Přiblížit na zobrazení všech prvků",
     "zoomToSelection": "Přiblížit na výběr",
-    "toggleElementLock": "Zamknout/odemknout výběr",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": "Zamknout/odemknout výběr"
   },
   "clearCanvasDialog": {
     "title": "Vymazat plátno"
@@ -396,8 +391,7 @@
     "fileSaved": "Soubor byl uložen.",
     "fileSavedToFilename": "Uloženo do {filename}",
     "canvas": "plátno",
-    "selection": "výběr",
-    "pasteAsSingleElement": ""
+    "selection": "výběr"
   },
   "colors": {
     "ffffff": "Bílá",
@@ -445,12 +439,5 @@
     "5c940d": "Limetková 9",
     "e67700": "Žlutá 9",
     "d9480f": "Oranzova"
-  },
-  "welcomeScreen": {
-    "data": "",
-    "switchToPlusApp": "",
-    "menuHints": "",
-    "toolbarHints": "",
-    "helpHints": ""
   }
 }

src/locales/da-DK.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Indsæt",
-    "pasteAsPlaintext": "",
     "pasteCharts": "Indsæt diagrammer",
     "selectAll": "Marker alle",
     "multiSelect": "Tilføj element til markering",
@@ -70,12 +69,12 @@
     "canvasBackground": "Lærredsbaggrund",
     "drawingCanvas": "Tegnelærred",
     "layers": "Lag",
-    "actions": "Handlinger",
+    "actions": "",
     "language": "Sprog",
-    "liveCollaboration": "",
+    "liveCollaboration": "Direkte samarbejde",
     "duplicateSelection": "",
-    "untitled": "Unavngivet",
-    "name": "Navn",
+    "untitled": "",
+    "name": "",
     "yourName": "Dit navn",
     "madeWithExcalidraw": "Fremstillet med Excalidraw",
     "group": "",
@@ -145,7 +144,7 @@
     "scale": "",
     "save": "",
     "saveAs": "Gem som",
-    "load": "",
+    "load": "Indlæs",
     "getShareableLink": "Lav et delbart link",
     "close": "Luk",
     "selectLanguage": "Vælg sprog",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "",
     "invalidSVGString": "",
     "cannotResolveCollabServer": "",
-    "importLibraryError": "",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "",
@@ -313,9 +310,7 @@
     "view": "",
     "zoomToFit": "",
     "zoomToSelection": "",
-    "toggleElementLock": "",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": ""
   },
   "clearCanvasDialog": {
     "title": ""
@@ -396,8 +391,7 @@
     "fileSaved": "Fil gemt.",
     "fileSavedToFilename": "Gemt som {filename}",
     "canvas": "canvas",
-    "selection": "markering",
-    "pasteAsSingleElement": ""
+    "selection": "markering"
   },
   "colors": {
     "ffffff": "",
@@ -445,12 +439,5 @@
     "5c940d": "",
     "e67700": "",
     "d9480f": ""
-  },
-  "welcomeScreen": {
-    "data": "",
-    "switchToPlusApp": "",
-    "menuHints": "",
-    "toolbarHints": "",
-    "helpHints": ""
   }
 }

src/locales/de-DE.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Einfügen",
-    "pasteAsPlaintext": "Als reinen Text einfügen",
     "pasteCharts": "Diagramme einfügen",
     "selectAll": "Alle auswählen",
     "multiSelect": "Element zur Auswahl hinzufügen",
@@ -72,7 +71,7 @@
     "layers": "Ebenen",
     "actions": "Aktionen",
     "language": "Sprache",
-    "liveCollaboration": "Live-Zusammenarbeit...",
+    "liveCollaboration": "Live-Zusammenarbeit",
     "duplicateSelection": "Duplizieren",
     "untitled": "Unbenannt",
     "name": "Name",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Zeichenfläche löschen & Hintergrundfarbe zurücksetzen",
     "exportJSON": "In Datei exportieren",
-    "exportImage": "Exportiere Bild...",
-    "export": "Speichern als...",
+    "exportImage": "Als Bild speichern",
+    "export": "Exportieren",
     "exportToPng": "Als PNG exportieren",
     "exportToSvg": "Als SVG exportieren",
     "copyToClipboard": "In Zwischenablage kopieren",
@@ -145,7 +144,7 @@
     "scale": "Skalierung",
     "save": "In aktueller Datei speichern",
     "saveAs": "Speichern unter",
-    "load": "Öffnen",
+    "load": "Laden",
     "getShareableLink": "Teilbaren Link erhalten",
     "close": "Schließen",
     "selectLanguage": "Sprache auswählen",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "SVG-Bild konnte nicht eingefügt werden. Das SVG-Markup sieht ungültig aus.",
     "invalidSVGString": "Ungültige SVG.",
     "cannotResolveCollabServer": "Konnte keine Verbindung zum Collab-Server herstellen. Bitte lade die Seite neu und versuche es erneut.",
-    "importLibraryError": "Bibliothek konnte nicht geladen werden",
-    "collabSaveFailed": "Keine Speicherung in der Backend-Datenbank möglich. Wenn die Probleme weiterhin bestehen, solltest Du Deine Datei lokal speichern, um sicherzustellen, dass Du Deine Arbeit nicht verlierst.",
-    "collabSaveFailed_sizeExceeded": "Keine Speicherung in der Backend-Datenbank möglich, die Zeichenfläche scheint zu groß zu sein. Du solltest Deine Datei lokal speichern, um sicherzustellen, dass Du Deine Arbeit nicht verlierst."
+    "importLibraryError": "Bibliothek konnte nicht geladen werden"
   },
   "toolBar": {
     "selection": "Auswahl",
@@ -217,7 +214,7 @@
     "text": "Text",
     "library": "Bibliothek",
     "lock": "Ausgewähltes Werkzeug nach Zeichnen aktiv lassen",
-    "penMode": "Stift-Modus - Berührung verhindern",
+    "penMode": "Verhindere Pinch-Zoom und akzeptiere Eingabe nur vom Stift",
     "link": "Link für ausgewählte Form hinzufügen / aktualisieren",
     "eraser": "Radierer"
   },
@@ -238,7 +235,7 @@
     "resize": "Du kannst die Proportionen einschränken, indem du SHIFT während der Größenänderung gedrückt hältst. Halte ALT gedrückt, um die Größe vom Zentrum aus zu ändern",
     "resizeImage": "Du kannst die Größe frei ändern, indem du SHIFT gedrückt hältst; halte ALT, um die Größe vom Zentrum aus zu ändern",
     "rotate": "Du kannst Winkel einschränken, indem du SHIFT während der Drehung gedrückt hältst",
-    "lineEditor_info": "CtrlOrCmd halten und Doppelklick oder CtrlOrCmd + Eingabe drücken, um Punkte zu bearbeiten",
+    "lineEditor_info": "Doppelklicken oder Eingabetaste drücken, um Punkte zu bearbeiten",
     "lineEditor_pointSelected": "Drücke Löschen, um Punkt(e) zu entfernen, CtrlOrCmd+D zum Duplizieren oder ziehe zum Verschieben",
     "lineEditor_nothingSelected": "Wähle einen zu bearbeitenden Punkt (halte SHIFT gedrückt um mehrere Punkte auszuwählen),\noder halte Alt gedrückt und klicke um neue Punkte hinzuzufügen",
     "placeImage": "Klicken, um das Bild zu platzieren oder klicken und ziehen um seine Größe manuell zu setzen",
@@ -313,9 +310,7 @@
     "view": "Ansicht",
     "zoomToFit": "Zoomen um alle Elemente einzupassen",
     "zoomToSelection": "Auf Auswahl zoomen",
-    "toggleElementLock": "Auswahl sperren/entsperren",
-    "movePageUpDown": "Seite nach oben/unten verschieben",
-    "movePageLeftRight": "Seite nach links/rechts verschieben"
+    "toggleElementLock": "Auswahl sperren/entsperren"
   },
   "clearCanvasDialog": {
     "title": "Zeichenfläche löschen"
@@ -396,8 +391,7 @@
     "fileSaved": "Datei gespeichert.",
     "fileSavedToFilename": "Als {filename} gespeichert",
     "canvas": "Zeichenfläche",
-    "selection": "Auswahl",
-    "pasteAsSingleElement": "Verwende {{shortcut}} , um als einzelnes Element\neinzufügen oder in einen existierenden Texteditor einzufügen"
+    "selection": "Auswahl"
   },
   "colors": {
     "ffffff": "Weiß",
@@ -445,12 +439,5 @@
     "5c940d": "Hellgrün 9",
     "e67700": "Gelb 9",
     "d9480f": "Orange 9"
-  },
-  "welcomeScreen": {
-    "data": "Alle Daten werden lokal in Deinem Browser gespeichert.",
-    "switchToPlusApp": "Möchtest du stattdessen zu Excalidraw+ gehen?",
-    "menuHints": "Exportieren, Einstellungen, Sprachen, ...",
-    "toolbarHints": "Wähle ein Werkzeug & beginne zu zeichnen!",
-    "helpHints": "Kurzbefehle & Hilfe"
   }
 }

src/locales/el-GR.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Επικόλληση",
-    "pasteAsPlaintext": "",
     "pasteCharts": "Επικόλληση γραφημάτων",
     "selectAll": "Επιλογή όλων",
     "multiSelect": "Προσθέστε το στοιχείο στην επιλογή",
@@ -72,7 +71,7 @@
     "layers": "Στρώματα",
     "actions": "Ενέργειες",
     "language": "Γλώσσα",
-    "liveCollaboration": "",
+    "liveCollaboration": "Ζωντανή συνεργασία",
     "duplicateSelection": "Δημιουργία αντιγράφου",
     "untitled": "Χωρίς τίτλο",
     "name": "Όνομα",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Επαναφορά του καμβά",
     "exportJSON": "Εξαγωγή σε αρχείο",
-    "exportImage": "",
-    "export": "",
+    "exportImage": "Αποθήκευση ως εικόνα",
+    "export": "Εξαγωγή",
     "exportToPng": "Εξαγωγή σε PNG",
     "exportToSvg": "Εξαγωγή σε SVG",
     "copyToClipboard": "Αντιγραφή στο πρόχειρο",
@@ -145,7 +144,7 @@
     "scale": "Κλίμακα",
     "save": "Αποθήκευση στο τρέχον αρχείο",
     "saveAs": "Αποθήκευση ως",
-    "load": "",
+    "load": "Άνοιγμα",
     "getShareableLink": "Δημόσιος σύνδεσμος",
     "close": "Κλείσιμο",
     "selectLanguage": "Επιλογή γλώσσας",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "Αδυναμία εισαγωγής εικόνας SVG. Η σήμανση της SVG δεν φαίνεται έγκυρη.",
     "invalidSVGString": "Μη έγκυρο SVG.",
     "cannotResolveCollabServer": "Αδυναμία σύνδεσης με τον διακομιστή συνεργασίας. Παρακαλώ ανανεώστε τη σελίδα και προσπαθήστε ξανά.",
-    "importLibraryError": "Αδυναμία φόρτωσης βιβλιοθήκης",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": "Αδυναμία φόρτωσης βιβλιοθήκης"
   },
   "toolBar": {
     "selection": "Επιλογή",
@@ -238,7 +235,7 @@
     "resize": "Μπορείς να περιορίσεις τις αναλογίες κρατώντας το SHIFT ενώ αλλάζεις μέγεθος,\nκράτησε πατημένο το ALT για αλλαγή μεγέθους από το κέντρο",
     "resizeImage": "Μπορείτε να αλλάξετε το μέγεθος ελεύθερα κρατώντας πατημένο το SHIFT,\nκρατήστε πατημένο το ALT για να αλλάξετε το μέγεθος από το κέντρο",
     "rotate": "Μπορείς να περιορίσεις τις γωνίες κρατώντας πατημένο το πλήκτρο SHIFT κατά την περιστροφή",
-    "lineEditor_info": "",
+    "lineEditor_info": "Διπλό-κλικ ή πιέστε Enter για να επεξεργαστείτε τα σημεία",
     "lineEditor_pointSelected": "Πατήστε Διαγραφή για αφαίρεση σημείου(ων),\nCtrlOrCmd+D για αντιγραφή, ή σύρετε για μετακίνηση",
     "lineEditor_nothingSelected": "Επιλέξτε ένα σημείο για να επεξεργαστείτε (κρατήστε πατημένο το SHIFT για να επιλέξετε πολλαπλά),\nή κρατήστε πατημένο το Alt και κάντε κλικ για να προσθέσετε νέα σημεία",
     "placeImage": "Κάντε κλικ για να τοποθετήσετε την εικόνα ή κάντε κλικ και σύρετε για να ορίσετε το μέγεθός της χειροκίνητα",
@@ -313,9 +310,7 @@
     "view": "Προβολή",
     "zoomToFit": "Zoom ώστε να χωρέσουν όλα τα στοιχεία",
     "zoomToSelection": "Ζουμ στην επιλογή",
-    "toggleElementLock": "Κλείδωμα/Ξεκλείδωμα επιλογής",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": "Κλείδωμα/Ξεκλείδωμα επιλογής"
   },
   "clearCanvasDialog": {
     "title": "Καθαρισμός καμβά"
@@ -396,8 +391,7 @@
     "fileSaved": "Το αρχείο αποθηκεύτηκε.",
     "fileSavedToFilename": "Αποθηκεύτηκε στο {filename}",
     "canvas": "καμβάς",
-    "selection": "επιλογή",
-    "pasteAsSingleElement": ""
+    "selection": "επιλογή"
   },
   "colors": {
     "ffffff": "Λευκό",
@@ -445,12 +439,5 @@
     "5c940d": "Πρασινοκίτρινο 9",
     "e67700": "Κίτρινο 9",
     "d9480f": "Πορτοκαλί 9"
-  },
-  "welcomeScreen": {
-    "data": "",
-    "switchToPlusApp": "",
-    "menuHints": "",
-    "toolbarHints": "",
-    "helpHints": ""
   }
 }

src/locales/en.json

@@ -202,9 +202,7 @@
     "svgImageInsertError": "Couldn't insert SVG image. The SVG markup looks invalid.",
     "invalidSVGString": "Invalid SVG.",
     "cannotResolveCollabServer": "Couldn't connect to the collab server. Please reload the page and try again.",
-    "importLibraryError": "Couldn't load library",
-    "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."
+    "importLibraryError": "Couldn't load library"
   },
   "toolBar": {
     "selection": "Selection",
@@ -314,9 +312,7 @@
     "view": "View",
     "zoomToFit": "Zoom to fit all elements",
     "zoomToSelection": "Zoom to selection",
-    "toggleElementLock": "Lock/unlock selection",
-    "movePageUpDown": "Move page up/down",
-    "movePageLeftRight": "Move page left/right"
+    "toggleElementLock": "Lock/unlock selection"
   },
   "clearCanvasDialog": {
     "title": "Clear canvas"
@@ -448,16 +444,10 @@
     "d9480f": "Orange 9"
   },
   "welcomeScreen": {
-    "app": {
-      "center_heading": "All your data is saved locally in your browser.",
-      "center_heading_plus": "Did you want to go to the Excalidraw+ instead?",
-      "menuHint": "Export, preferences, languages, ..."
-    },
-    "defaults": {
-      "menuHint": "Export, preferences, and more...",
-      "center_heading": "Diagrams. Made. Simple.",
-      "toolbarHint": "Pick a tool & Start drawing!",
-      "helpHint": "Shortcuts & help"
-    }
+    "data": "All your data is saved locally in your browser.",
+    "switchToPlusApp": "Did you want to go to the Excalidraw+ instead?",
+    "menuHints": "Export, preferences, languages, ...",
+    "toolbarHints": "Pick a tool & Start drawing!",
+    "helpHints": "Shortcuts & help"
   }
 }

src/locales/es-ES.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Pegar",
-    "pasteAsPlaintext": "Pegar como texto sin formato",
     "pasteCharts": "Pegar gráficos",
     "selectAll": "Seleccionar todo",
     "multiSelect": "Añadir elemento a la selección",
@@ -72,7 +71,7 @@
     "layers": "Capas",
     "actions": "Acciones",
     "language": "Idioma",
-    "liveCollaboration": "Colaboración en directo...",
+    "liveCollaboration": "Colaboración en directo",
     "duplicateSelection": "Duplicar",
     "untitled": "Sin título",
     "name": "Nombre",
@@ -116,8 +115,8 @@
       "label": "Enlace"
     },
     "lineEditor": {
-      "edit": "Editar línea",
-      "exit": "Salir del editor en línea"
+      "edit": "",
+      "exit": ""
     },
     "elementLock": {
       "lock": "Bloquear",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Limpiar lienzo y reiniciar el color de fondo",
     "exportJSON": "Exportar a archivo",
-    "exportImage": "Exportar imagen...",
-    "export": "Guardar en...",
+    "exportImage": "Guardar como imagen",
+    "export": "Exportar",
     "exportToPng": "Exportar a PNG",
     "exportToSvg": "Exportar a SVG",
     "copyToClipboard": "Copiar al portapapeles",
@@ -145,7 +144,7 @@
     "scale": "Escalar",
     "save": "Guardar en archivo actual",
     "saveAs": "Guardar como",
-    "load": "Abrir",
+    "load": "Cargar",
     "getShareableLink": "Obtener enlace para compartir",
     "close": "Cerrar",
     "selectLanguage": "Elegir idioma",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "No se pudo insertar la imagen SVG. El código SVG parece inválido.",
     "invalidSVGString": "SVG no válido.",
     "cannotResolveCollabServer": "No se pudo conectar al servidor colaborador. Por favor, vuelva a cargar la página y vuelva a intentarlo.",
-    "importLibraryError": "No se pudo cargar la librería",
-    "collabSaveFailed": "No se pudo guardar en la base de datos del backend. Si los problemas persisten, debería guardar su archivo localmente para asegurarse de que no pierde su trabajo.",
-    "collabSaveFailed_sizeExceeded": "No se pudo guardar en la base de datos del backend, el lienzo parece ser demasiado grande. Debería guardar el archivo localmente para asegurarse de que no pierde su trabajo."
+    "importLibraryError": "No se pudo cargar la librería"
   },
   "toolBar": {
     "selection": "Selección",
@@ -217,7 +214,7 @@
     "text": "Texto",
     "library": "Biblioteca",
     "lock": "Mantener la herramienta seleccionada activa después de dibujar",
-    "penMode": "Modo Lápiz - previene toque",
+    "penMode": "Evitar el zoom de pellizco y aceptar la entrada libre sólo desde el lápiz",
     "link": "Añadir/Actualizar enlace para una forma seleccionada",
     "eraser": "Borrar"
   },
@@ -238,10 +235,10 @@
     "resize": "Para mantener las proporciones mantén SHIFT presionado mientras modificas el tamaño, \nmantén presionado ALT para modificar el tamaño desde el centro",
     "resizeImage": "Puede redimensionar libremente pulsando SHIFT,\npulse ALT para redimensionar desde el centro",
     "rotate": "Puedes restringir los ángulos manteniendo presionado SHIFT mientras giras",
-    "lineEditor_info": "Mantenga pulsado CtrlOrCmd y haga doble click o presione CtrlOrCmd + Enter para editar puntos",
+    "lineEditor_info": "Doble clic o pulse Enter para editar puntos",
     "lineEditor_pointSelected": "Presione Suprimir para eliminar el/los punto(s), CtrlOrCmd+D para duplicarlo, o arrástrelo para moverlo",
-    "lineEditor_nothingSelected": "Seleccione un punto a editar (mantenga MAYÚSCULAS para seleccionar múltiples),\no mantenga pulsado Alt y haga click para añadir nuevos puntos",
-    "placeImage": "Haga clic para colocar la imagen o haga click y arrastre para establecer su tamaño manualmente",
+    "lineEditor_nothingSelected": "Seleccione un punto a editar (mantenga MAYÚSCULAS para seleccionar múltiples),\no mantenga pulsado Alt y haga clic para añadir nuevos puntos",
+    "placeImage": "Haga clic para colocar la imagen o haga clic y arrastre para establecer su tamaño manualmente",
     "publishLibrary": "Publica tu propia biblioteca",
     "bindTextToElement": "Presione Entrar para agregar",
     "deepBoxSelect": "Mantén CtrlOrCmd para seleccionar en profundidad, y para evitar arrastrar",
@@ -291,7 +288,7 @@
   },
   "helpDialog": {
     "blog": "Lea nuestro blog",
-    "click": "click",
+    "click": "clic",
     "deepSelect": "Selección profunda",
     "deepBoxSelect": "Seleccione en profundidad dentro de la caja, y evite arrastrar",
     "curvedArrow": "Flecha curva",
@@ -304,7 +301,7 @@
     "github": "¿Ha encontrado un problema? Envíelo",
     "howto": "Siga nuestras guías",
     "or": "o",
-    "preventBinding": "Evitar enlace de flechas",
+    "preventBinding": "Evitar yuxtaposición de flechas",
     "tools": "Herramientas",
     "shortcuts": "Atajos del teclado",
     "textFinish": "Finalizar edición (editor de texto)",
@@ -313,9 +310,7 @@
     "view": "Vista",
     "zoomToFit": "Ajustar la vista para mostrar todos los elementos",
     "zoomToSelection": "Zoom a la selección",
-    "toggleElementLock": "Bloquear/desbloquear selección",
-    "movePageUpDown": "Mover página hacia arriba/abajo",
-    "movePageLeftRight": "Mover página hacia la izquierda/derecha"
+    "toggleElementLock": "Bloquear/desbloquear selección"
   },
   "clearCanvasDialog": {
     "title": "Borrar lienzo"
@@ -333,7 +328,7 @@
       "authorName": "Nombre o nombre de usuario",
       "libraryName": "Nombre de tu biblioteca",
       "libraryDesc": "Descripción de su biblioteca para ayudar a la gente a entender su uso",
-      "githubHandle": "Nombre de usuario de GitHub (opcional), así podrá editar la biblioteca una vez enviada para su revisión",
+      "githubHandle": "GitHub maneja (opcional), así que puede editar la biblioteca una vez enviada para su revisión",
       "twitterHandle": "Nombre de usuario de Twitter (opcional), así que sabemos a quién acreditar cuando se promociona en Twitter",
       "website": "Enlace a su sitio web personal o en cualquier otro lugar (opcional)"
     },
@@ -384,7 +379,7 @@
     "title": "Estadísticas para nerds",
     "total": "Total",
     "version": "Versión",
-    "versionCopy": "Click para copiar",
+    "versionCopy": "Clic para copiar",
     "versionNotAvailable": "Versión no disponible",
     "width": "Ancho"
   },
@@ -396,8 +391,7 @@
     "fileSaved": "Archivo guardado.",
     "fileSavedToFilename": "Guardado en {filename}",
     "canvas": "lienzo",
-    "selection": "selección",
-    "pasteAsSingleElement": "Usa {{shortcut}} para pegar como un solo elemento,\no pegar en un editor de texto existente"
+    "selection": "selección"
   },
   "colors": {
     "ffffff": "Blanco",
@@ -445,12 +439,5 @@
     "5c940d": "Lima 9",
     "e67700": "Amarillo 9",
     "d9480f": "Naranja 9"
-  },
-  "welcomeScreen": {
-    "data": "Toda su información es guardada localmente en su navegador.",
-    "switchToPlusApp": "¿Quieres ir a Excalidraw+ en su lugar?",
-    "menuHints": "Exportar, preferencias, idiomas, ...",
-    "toolbarHints": "¡Escoge una herramienta & Empiece a dibujar!",
-    "helpHints": "Atajos & ayuda"
   }
 }

src/locales/eu-ES.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Itsatsi",
-    "pasteAsPlaintext": "",
     "pasteCharts": "Itsatsi grafikoak",
     "selectAll": "Hautatu dena",
     "multiSelect": "Gehitu elementua hautapenera",
@@ -72,7 +71,7 @@
     "layers": "Geruzak",
     "actions": "Ekintzak",
     "language": "Hizkuntza",
-    "liveCollaboration": "Zuzeneko elkarlana...",
+    "liveCollaboration": "Zuzeneko elkarlana",
     "duplicateSelection": "Bikoiztu",
     "untitled": "Izengabea",
     "name": "Izena",
@@ -116,8 +115,8 @@
       "label": "Esteka"
     },
     "lineEditor": {
-      "edit": "Editatu lerroa",
-      "exit": "Irten lerro-editoretik"
+      "edit": "",
+      "exit": ""
     },
     "elementLock": {
       "lock": "Blokeatu",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Garbitu oihala",
     "exportJSON": "Esportatu fitxategira",
-    "exportImage": "Esportatu irudia...",
-    "export": "Gorde hemen...",
+    "exportImage": "Gorde irudi gisa",
+    "export": "Esportatu",
     "exportToPng": "Esportatu PNG gisa",
     "exportToSvg": "Esportatu SVG gisa",
     "copyToClipboard": "Kopiatu arbelera",
@@ -145,7 +144,7 @@
     "scale": "Eskala",
     "save": "Gorde uneko fitxategian",
     "saveAs": "Gorde honela",
-    "load": "Ireki",
+    "load": "Kargatu",
     "getShareableLink": "Lortu partekatzeko esteka",
     "close": "Itxi",
     "selectLanguage": "Hautatu hizkuntza",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "Ezin izan da SVG irudia txertatu. SVG markak baliogabea dirudi.",
     "invalidSVGString": "SVG baliogabea.",
     "cannotResolveCollabServer": "Ezin izan da elkarlaneko zerbitzarira konektatu. Mesedez, berriro kargatu orria eta saiatu berriro.",
-    "importLibraryError": "Ezin izan da liburutegia kargatu",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": "Ezin izan da liburutegia kargatu"
   },
   "toolBar": {
     "selection": "Hautapena",
@@ -217,7 +214,7 @@
     "text": "Testua",
     "library": "Liburutegia",
     "lock": "Mantendu aktibo hautatutako tresna marraztu ondoren",
-    "penMode": "Luma modua - ukipena saihestu",
+    "penMode": "Saihestu txikiagotzea eta onartu marrazte libreko idazketa solik arkatza bidez",
     "link": "Gehitu / Eguneratu esteka hautatutako forma baterako",
     "eraser": "Borragoma"
   },
@@ -238,7 +235,7 @@
     "resize": "Proportzioak mantendu ditzakezu SHIFT sakatuta tamaina aldatzen duzun bitartean.\nsakatu ALT erditik tamaina aldatzeko",
     "resizeImage": "Tamaina libreki alda dezakezu SHIFT sakatuta,\nsakatu ALT erditik tamaina aldatzeko",
     "rotate": "Angeluak mantendu ditzakezu SHIFT sakatuta biratzen duzun bitartean",
-    "lineEditor_info": "",
+    "lineEditor_info": "Egin klik bikoitza edo sakatu Sartu puntuak editatzeko",
     "lineEditor_pointSelected": "Sakatu Ezabatu puntuak kentzeko,\nKtrl+D bikoizteko, edo arrastatu mugitzeko",
     "lineEditor_nothingSelected": "Hautatu editatzeko puntu bat (SHIFT sakatuta anitz hautatzeko),\nedo eduki Alt sakatuta eta egin klik puntu berriak gehitzeko",
     "placeImage": "Egin klik irudia kokatzeko, edo egin klik eta arrastatu bere tamaina eskuz ezartzeko",
@@ -313,9 +310,7 @@
     "view": "Bistaratu",
     "zoomToFit": "Egin zoom elementu guztiak ikusteko",
     "zoomToSelection": "Zooma hautapenera",
-    "toggleElementLock": "Blokeatu/desbloketatu hautapena",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": "Blokeatu/desbloketatu hautapena"
   },
   "clearCanvasDialog": {
     "title": "Garbitu oihala"
@@ -396,8 +391,7 @@
     "fileSaved": "Fitxategia gorde da.",
     "fileSavedToFilename": "{filename}-n gorde da",
     "canvas": "oihala",
-    "selection": "hautapena",
-    "pasteAsSingleElement": ""
+    "selection": "hautapena"
   },
   "colors": {
     "ffffff": "Zuria",
@@ -445,12 +439,5 @@
     "5c940d": "Lima 9",
     "e67700": "Horia 9",
     "d9480f": "Laranja 9"
-  },
-  "welcomeScreen": {
-    "data": "Zure datu guztiak modu lokalean gordetzen dira zure nabigatzailean.",
-    "switchToPlusApp": "Horren ordez Excalidraw+-ra joan nahi al zenuen?",
-    "menuHints": "Esportatu, hobespenak, hizkuntzak,...",
-    "toolbarHints": "Aukeratu tresna bat eta hasi marrazten!",
-    "helpHints": "Lasterbideak eta laguntza"
   }
 }

src/locales/fa-IR.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "جای گذاری",
-    "pasteAsPlaintext": "",
     "pasteCharts": "قراردادن نمودارها",
     "selectAll": "انتخاب همه",
     "multiSelect": "یک ایتم به انتخاب شده ها اضافه کنید.",
@@ -72,7 +71,7 @@
     "layers": "لایه ها",
     "actions": "عملیات",
     "language": "زبان",
-    "liveCollaboration": "همکاری آنلاین...",
+    "liveCollaboration": "همکاری زنده",
     "duplicateSelection": "تکرار",
     "untitled": "بدون عنوان",
     "name": "نام",
@@ -116,8 +115,8 @@
       "label": "لینک"
     },
     "lineEditor": {
-      "edit": "ویرایش لینک",
-      "exit": "خروج از ویرایشگر"
+      "edit": "",
+      "exit": ""
     },
     "elementLock": {
       "lock": "قفل",
@@ -126,18 +125,18 @@
       "unlockAll": "باز کردن قفل همه"
     },
     "statusPublished": "منتشر شده",
-    "sidebarLock": "باز نگه داشتن سایدبار"
+    "sidebarLock": ""
   },
   "library": {
-    "noItems": "آیتمی به اینجا اضافه نشده...",
-    "hint_emptyLibrary": "یک آیتم روی بوم را برای اضافه شده به اینجا انتخاب کنید، یا یک کتابخانه از مخزن عمومی در بخش پایین را نصب کنید.",
-    "hint_emptyPrivateLibrary": "یک آیتم روی بوم را برای اضافه شدن به اینجا انتخاب کنید."
+    "noItems": "",
+    "hint_emptyLibrary": "",
+    "hint_emptyPrivateLibrary": ""
   },
   "buttons": {
     "clearReset": "پاکسازی بوم نقاشی",
     "exportJSON": "خروجی در فایل",
-    "exportImage": "خروجی گرفتن از تصویر...",
-    "export": "ذخیره در...",
+    "exportImage": "ذخیره به عنوان عکس",
+    "export": "تبدیل",
     "exportToPng": "تبدیل به PNG",
     "exportToSvg": "تبدیل به SVG",
     "copyToClipboard": "کپی در حافظه موقت",
@@ -145,7 +144,7 @@
     "scale": "مقیاس",
     "save": "ذخیره در همین فایل",
     "saveAs": "ذخیره با نام",
-    "load": "باز کردن",
+    "load": "بارگذاری",
     "getShareableLink": "دریافت لینک قابل اشتراک",
     "close": "بستن",
     "selectLanguage": "انتخاب زبان",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "تصویر SVG وارد نشد. نشانه گذاری SVG نامعتبر به نظر می رسد.",
     "invalidSVGString": "SVG نادرست.",
     "cannotResolveCollabServer": "به سرور collab متصل نشد. لطفا صفحه را مجددا بارگذاری کنید و دوباره تلاش کنید.",
-    "importLibraryError": "داده‌ها بارگذاری نشدند",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": "داده‌ها بارگذاری نشدند"
   },
   "toolBar": {
     "selection": "گزینش",
@@ -217,7 +214,7 @@
     "text": "متن",
     "library": "کتابخانه",
     "lock": "ابزار انتخاب شده را بعد از کشیدن نگه دار",
-    "penMode": "حالت قلم - جلوگیری از تماس",
+    "penMode": "از زوم کوچک کردن جلوگیری کنید و ورودی آزاد را فقط از قلم بپذیرید",
     "link": "افزودن/به‌روزرسانی پیوند برای شکل انتخابی",
     "eraser": "پاک کن"
   },
@@ -238,7 +235,7 @@
     "resize": "می توانید با نگه داشتن SHIFT در هنگام تغییر اندازه، نسبت ها را محدود کنید،ALT را برای تغییر اندازه از مرکز نگه دارید",
     "resizeImage": "با نگه داشتن SHIFT می توانید آزادانه اندازه را تغییر دهید،\nبرای تغییر اندازه از مرکز، ALT را نگه دارید",
     "rotate": "با نگه داشتن SHIFT هنگام چرخش می توانید زاویه ها را محدود کنید",
-    "lineEditor_info": "",
+    "lineEditor_info": "دوبار کلیک کنید یا Enter را فشار دهید تا نقاط را ویرایش کنید",
     "lineEditor_pointSelected": "برای حذف نقطه Delete برای کپی زدن Ctrl یا Cmd+D را بزنید و یا برای جابجایی بکشید",
     "lineEditor_nothingSelected": "یک نقطه را برای ویرایش انتخاب کنید (SHIFT را برای انتخاب چندگانه نگه دارید)،\nیا Alt را نگه دارید و برای افزودن نقاط جدید کلیک کنید",
     "placeImage": "برای قرار دادن تصویر کلیک کنید، یا کلیک کنید و بکشید تا اندازه آن به صورت دستی تنظیم شود",
@@ -313,9 +310,7 @@
     "view": "مشاهده",
     "zoomToFit": "بزرگنمایی برای دیدن تمام آیتم ها",
     "zoomToSelection": "بزرگنمایی قسمت انتخاب شده",
-    "toggleElementLock": "قفل/بازکردن انتخاب شده ها",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": "قفل/بازکردن انتخاب شده ها"
   },
   "clearCanvasDialog": {
     "title": "پاک کردن بوم"
@@ -396,8 +391,7 @@
     "fileSaved": "فایل ذخیره شد.",
     "fileSavedToFilename": "ذخیره در {filename}",
     "canvas": "بوم",
-    "selection": "انتخاب",
-    "pasteAsSingleElement": ""
+    "selection": "انتخاب"
   },
   "colors": {
     "ffffff": "سفید",
@@ -445,12 +439,5 @@
     "5c940d": "لیمویی 9",
     "e67700": "زرد 9",
     "d9480f": "نارنجی 9"
-  },
-  "welcomeScreen": {
-    "data": "همه ی داده های شما به صورت محلی در مرورگر ذخیره میشود.",
-    "switchToPlusApp": "آیا ترجیح میدهید به Excalidraw+ بروید؟",
-    "menuHints": "خروجی گرفتن، تنظیمات، زبانها، ...",
-    "toolbarHints": "یک ابزار را انتخاب کنید و ترسیم را شروع کنید!",
-    "helpHints": "میانبرها و کمک"
   }
 }

src/locales/fi-FI.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Liitä",
-    "pasteAsPlaintext": "",
     "pasteCharts": "Liitä kaaviot",
     "selectAll": "Valitse kaikki",
     "multiSelect": "Lisää kohde valintaan",
@@ -72,7 +71,7 @@
     "layers": "Tasot",
     "actions": "Toiminnot",
     "language": "Kieli",
-    "liveCollaboration": "",
+    "liveCollaboration": "Live-yhteistyö",
     "duplicateSelection": "Monista",
     "untitled": "Nimetön",
     "name": "Nimi",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Tyhjennä piirtoalue",
     "exportJSON": "Vie tiedostoon",
-    "exportImage": "",
-    "export": "",
+    "exportImage": "Tallenna kuvana",
+    "export": "Vie",
     "exportToPng": "Vie PNG-tiedostona",
     "exportToSvg": "Vie SVG-tiedostona",
     "copyToClipboard": "Kopioi leikepöydälle",
@@ -145,7 +144,7 @@
     "scale": "Koko",
     "save": "Tallenna nykyiseen tiedostoon",
     "saveAs": "Tallenna nimellä",
-    "load": "",
+    "load": "Avaa",
     "getShareableLink": "Hae jaettava linkki",
     "close": "Sulje",
     "selectLanguage": "Valitse kieli",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "SVG- kuvaa ei voitu lisätä. Tiedoston SVG-sisältö näyttää virheelliseltä.",
     "invalidSVGString": "Virheellinen SVG.",
     "cannotResolveCollabServer": "Yhteyden muodostaminen collab-palvelimeen epäonnistui. Virkistä sivu ja yritä uudelleen.",
-    "importLibraryError": "",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Valinta",
@@ -217,7 +214,7 @@
     "text": "Teksti",
     "library": "Kirjasto",
     "lock": "Pidä valittu työkalu aktiivisena piirron jälkeen",
-    "penMode": "",
+    "penMode": "Estä nipistyszoomaus ja vastaanota ainoastaan kynällä piirretty",
     "link": "Lisää/päivitä linkki valitulle muodolle",
     "eraser": "Poistotyökalu"
   },
@@ -238,7 +235,7 @@
     "resize": "Voit rajoittaa mittasuhteet pitämällä SHIFT-näppäintä alaspainettuna kun muutat kokoa, pidä ALT-näppäintä alaspainettuna muuttaaksesi kokoa keskipisteen suhteen",
     "resizeImage": "Voit muuttaa kokoa vapaasti pitämällä SHIFTiä pohjassa, pidä ALT pohjassa muuttaaksesi kokoa keskipisteen ympäri",
     "rotate": "Voit rajoittaa kulman pitämällä SHIFT pohjassa pyörittäessäsi",
-    "lineEditor_info": "",
+    "lineEditor_info": "Kaksoisnapauta tai paina Enter muokataksesi pisteitä",
     "lineEditor_pointSelected": "Poista piste(et) painamalla delete, monista painamalla CtrlOrCmd+D, tai liikuta raahaamalla",
     "lineEditor_nothingSelected": "Valitse muokattava piste (monivalinta pitämällä SHIFT pohjassa), tai paina Alt ja klikkaa lisätäksesi uusia pisteitä",
     "placeImage": "Klikkaa asettaaksesi kuvan, tai klikkaa ja raahaa asettaaksesi sen koon manuaalisesti",
@@ -313,9 +310,7 @@
     "view": "Näkymä",
     "zoomToFit": "Näytä kaikki elementit",
     "zoomToSelection": "Näytä valinta",
-    "toggleElementLock": "",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": ""
   },
   "clearCanvasDialog": {
     "title": "Pyyhi piirtoalue"
@@ -396,8 +391,7 @@
     "fileSaved": "Tiedosto tallennettu.",
     "fileSavedToFilename": "Tallennettiin kohteeseen {filename}",
     "canvas": "piirtoalue",
-    "selection": "valinta",
-    "pasteAsSingleElement": ""
+    "selection": "valinta"
   },
   "colors": {
     "ffffff": "Valkoinen",
@@ -445,12 +439,5 @@
     "5c940d": "Limenvihreä 9",
     "e67700": "Keltainen 9",
     "d9480f": "Oranssi 9"
-  },
-  "welcomeScreen": {
-    "data": "",
-    "switchToPlusApp": "",
-    "menuHints": "",
-    "toolbarHints": "",
-    "helpHints": ""
   }
 }

src/locales/fr-FR.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Coller",
-    "pasteAsPlaintext": "Coller comme texte brut",
     "pasteCharts": "Coller les graphiques",
     "selectAll": "Tout sélectionner",
     "multiSelect": "Ajouter l'élément à la sélection",
@@ -45,7 +44,7 @@
     "exportEmbedScene": "Intégrer la scène",
     "exportEmbedScene_details": "Les données de scène seront enregistrées dans le fichier PNG/SVG exporté, afin que la scène puisse être restaurée à partir de celui-ci.\nCela augmentera la taille du fichier exporté.",
     "addWatermark": "Ajouter \"Réalisé avec Excalidraw\"",
-    "handDrawn": "Manuscrit",
+    "handDrawn": "À la main",
     "normal": "Normale",
     "code": "Code",
     "small": "Petite",
@@ -72,7 +71,7 @@
     "layers": "Disposition",
     "actions": "Actions",
     "language": "Langue",
-    "liveCollaboration": "Collaboration en direct...",
+    "liveCollaboration": "Collaboration en direct",
     "duplicateSelection": "Dupliquer",
     "untitled": "Sans-titre",
     "name": "Nom",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Réinitialiser le canevas",
     "exportJSON": "Exporter comme fichier",
-    "exportImage": "Exporter l'image...",
-    "export": "Enregistrer sous...",
+    "exportImage": "Enregistrer comme image",
+    "export": "Exporter",
     "exportToPng": "Enregistrer en PNG",
     "exportToSvg": "Enregistrer en SVG",
     "copyToClipboard": "Copier dans le presse-papier",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "Impossible d'insérer l'image SVG. Le balisage SVG semble invalide.",
     "invalidSVGString": "SVG invalide.",
     "cannotResolveCollabServer": "Impossible de se connecter au serveur collaboratif. Veuillez recharger la page et réessayer.",
-    "importLibraryError": "Impossible de charger la bibliothèque",
-    "collabSaveFailed": "Impossible d'enregistrer dans la base de données en arrière-plan. Si des problèmes persistent, vous devriez enregistrer votre fichier localement pour vous assurer de ne pas perdre votre travail.",
-    "collabSaveFailed_sizeExceeded": "Impossible d'enregistrer dans la base de données en arrière-plan, le tableau semble trop grand. Vous devriez enregistrer le fichier localement pour vous assurer de ne pas perdre votre travail."
+    "importLibraryError": "Impossible de charger la bibliothèque"
   },
   "toolBar": {
     "selection": "Sélection",
@@ -217,7 +214,7 @@
     "text": "Texte",
     "library": "Bibliothèque",
     "lock": "Garder l'outil sélectionné actif après le dessin",
-    "penMode": "Mode stylo - évite le toucher",
+    "penMode": "Empêcher le zoom tactile et accepter la saisie libre uniquement à partir du stylet",
     "link": "Ajouter/mettre à jour le lien pour une forme sélectionnée",
     "eraser": "Gomme"
   },
@@ -238,7 +235,7 @@
     "resize": "Vous pouvez conserver les proportions en maintenant la touche MAJ pendant le redimensionnement, maintenez la touche ALT pour redimensionner par rapport au centre",
     "resizeImage": "Vous pouvez redimensionner librement en maintenant SHIFT,\nmaintenez ALT pour redimensionner depuis le centre",
     "rotate": "Vous pouvez restreindre les angles en maintenant MAJ pendant la rotation",
-    "lineEditor_info": "Maintenez CtrlOrCmd et Double-cliquez ou appuyez sur CtrlOrCmd + Entrée pour modifier les points",
+    "lineEditor_info": "Double-cliquez ou appuyez sur Entrée pour éditer les points",
     "lineEditor_pointSelected": "Appuyer sur Suppr. pour supprimer des points, Ctrl ou Cmd+D pour dupliquer, ou faire glisser pour déplacer",
     "lineEditor_nothingSelected": "Sélectionner un point pour éditer (maintenir la touche MAJ pour en sélectionner plusieurs),\nou maintenir la touche Alt enfoncée et cliquer pour ajouter de nouveaux points",
     "placeImage": "Cliquez pour placer l'image, ou cliquez et faites glisser pour définir sa taille manuellement",
@@ -313,9 +310,7 @@
     "view": "Affichage",
     "zoomToFit": "Zoomer pour voir tous les éléments",
     "zoomToSelection": "Zoomer sur la sélection",
-    "toggleElementLock": "Verrouiller/déverrouiller la sélection",
-    "movePageUpDown": "Déplacer la page vers le haut/bas",
-    "movePageLeftRight": "Déplacer la page vers la gauche/droite"
+    "toggleElementLock": "Verrouiller/déverrouiller la sélection"
   },
   "clearCanvasDialog": {
     "title": "Effacer la zone de dessin"
@@ -396,8 +391,7 @@
     "fileSaved": "Fichier enregistré.",
     "fileSavedToFilename": "Enregistré sous {filename}",
     "canvas": "canevas",
-    "selection": "sélection",
-    "pasteAsSingleElement": "Utiliser {{shortcut}} pour coller comme un seul élément,\nou coller dans un éditeur de texte existant"
+    "selection": "sélection"
   },
   "colors": {
     "ffffff": "Blanc",
@@ -445,12 +439,5 @@
     "5c940d": "Citron vert 9",
     "e67700": "Jaune 9",
     "d9480f": "Orange 9"
-  },
-  "welcomeScreen": {
-    "data": "Toutes vos données sont sauvegardées en local dans votre navigateur.",
-    "switchToPlusApp": "Vous vouliez plutôt aller à Excalidraw+ ?",
-    "menuHints": "Exportation, préférences, langues, ...",
-    "toolbarHints": "Choisissez un outil et commencez à dessiner !",
-    "helpHints": "Raccourcis et aide"
   }
 }

src/locales/gl-ES.json

@@ -1,7 +1,6 @@
 {
   "labels": {
-    "paste": "Pegar",
-    "pasteAsPlaintext": "Pegar coma texto sen formato",
+    "paste": "Paste",
     "pasteCharts": "Pegar gráficos",
     "selectAll": "Seleccionar todo",
     "multiSelect": "Engadir elemento á selección",
@@ -43,9 +42,9 @@
     "onlySelected": "Só seleccionados",
     "withBackground": "Fondo",
     "exportEmbedScene": "Inserir escena",
-    "exportEmbedScene_details": "Os datos da escena serán gardados no ficheiro PNG/SVG exportado polo que a escena poderá ser restaurada dende el. Isto aumentará o tamaño do ficheiro exportado.",
+    "exportEmbedScene_details": "",
     "addWatermark": "Engadir \"Feito con Excalidraw\"",
-    "handDrawn": "Debuxado a man",
+    "handDrawn": "Debuzado á man",
     "normal": "Normal",
     "code": "Código",
     "small": "Pequeno",
@@ -72,7 +71,7 @@
     "layers": "Capas",
     "actions": "Accións",
     "language": "Idioma",
-    "liveCollaboration": "Colaboración en directo...",
+    "liveCollaboration": "Colaboración en directo",
     "duplicateSelection": "Duplicar",
     "untitled": "Sen título",
     "name": "Nome",
@@ -96,8 +95,8 @@
     "centerHorizontally": "Centrar horizontalmente",
     "distributeHorizontally": "Distribuír horizontalmente",
     "distributeVertically": "Distribuír verticalmente",
-    "flipHorizontal": "Virar horizontalmente",
-    "flipVertical": "Virar verticalmente",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "Modo de visualización",
     "toggleExportColorScheme": "Alternar esquema de cores de exportación",
     "share": "Compartir",
@@ -116,8 +115,8 @@
       "label": "Ligazón"
     },
     "lineEditor": {
-      "edit": "Editar liña",
-      "exit": "Saír do editor de liñas"
+      "edit": "",
+      "exit": ""
     },
     "elementLock": {
       "lock": "Bloquear",
@@ -130,14 +129,14 @@
   },
   "library": {
     "noItems": "Aínda non hai elementos engadidos...",
-    "hint_emptyLibrary": "Seleccione un elemento no lenzo para engadilo aquí, ou instale unha biblioteca dende o repositorio público, como se detalla a continuación.",
-    "hint_emptyPrivateLibrary": "Seleccione un elemento do lenzo para engadilo aquí."
+    "hint_emptyLibrary": "",
+    "hint_emptyPrivateLibrary": ""
   },
   "buttons": {
     "clearReset": "Limpar o lenzo",
     "exportJSON": "Exportar a arquivo",
-    "exportImage": "Exportar imaxe...",
-    "export": "Gardar en...",
+    "exportImage": "Gardar como imaxe",
+    "export": "Exportar",
     "exportToPng": "Exportar a PNG",
     "exportToSvg": "Exportar a SVG",
     "copyToClipboard": "Copiar ao portapapeis",
@@ -145,7 +144,7 @@
     "scale": "Escala",
     "save": "Gardar no ficheiro actual",
     "saveAs": "Gardar como",
-    "load": "Abrir",
+    "load": "Cargar",
     "getShareableLink": "Obter unha ligazón que se poida compartir",
     "close": "Pechar",
     "selectLanguage": "Seleccionar idioma",
@@ -177,37 +176,35 @@
     "couldNotCreateShareableLink": "Non se puido crear unha ligazón para compartir.",
     "couldNotCreateShareableLinkTooBig": "Non se puido crear a ligazón para compartir: a escena é demasiado grande",
     "couldNotLoadInvalidFile": "Non se puido cargar o ficheiro non válido",
-    "importBackendFailed": "A importación dende o backend fallou.",
-    "cannotExportEmptyCanvas": "Non se pode exportar un lenzo baleiro.",
-    "couldNotCopyToClipboard": "Non se puido copiar ao portapapeis.",
+    "importBackendFailed": "",
+    "cannotExportEmptyCanvas": "",
+    "couldNotCopyToClipboard": "",
     "decryptFailed": "Non se poideron descifrar os datos.",
-    "uploadedSecurly": "A carga foi asegurada con cifrado de extremo a extremo, o que significa que o servidor de Excalidraw e terceiros non poden ler o contido.",
-    "loadSceneOverridePrompt": "A carga dun debuxo externo substituirá o contido existente. Desexa continuar?",
-    "collabStopOverridePrompt": "Deter a sesión, sobrescribirá o seu debuxo local previamente almacenado. Está seguro?\n\n(Se quere manter o seu debuxo local, simplemente peche a lapela do navegador.)",
-    "errorAddingToLibrary": "Non se puido engadir o elemento á biblioteca",
-    "errorRemovingFromLibrary": "Non se puido eliminar o elemento da biblioteca",
-    "confirmAddLibrary": "Isto engadirá {{numShapes}} forma(s) a túa biblioteca. Estás seguro?",
-    "imageDoesNotContainScene": "Esta imaxe non parece conter ningún dato da escena. Activou a inserción de escenas durante a exportación?",
-    "cannotRestoreFromImage": "Non se puido restaurar a escena dende este arquivo de imaxe",
-    "invalidSceneUrl": "Non se puido importar a escena dende a URL proporcionada. Ou ben está malformada ou non contén un JSON con información válida para Excalidraw.",
-    "resetLibrary": "Isto limpará a súa biblioteca. Está seguro?",
-    "removeItemsFromsLibrary": "Eliminar {{count}} elemento(s) da biblioteca?",
-    "invalidEncryptionKey": "A clave de cifrado debe ter 22 caracteres. A colaboración en directo está desactivada."
+    "uploadedSecurly": "A carga foi asegurada con cifrado de extremo a extremo, o que significa que o servidor de Excalidraw e terceiros non poder ler o contenido.",
+    "loadSceneOverridePrompt": "Si carga este debuxo externo, reemprazará o que ten. ¿Desexa continuar?",
+    "collabStopOverridePrompt": "",
+    "errorAddingToLibrary": "",
+    "errorRemovingFromLibrary": "",
+    "confirmAddLibrary": "",
+    "imageDoesNotContainScene": "",
+    "cannotRestoreFromImage": "",
+    "invalidSceneUrl": "",
+    "resetLibrary": "",
+    "removeItemsFromsLibrary": "",
+    "invalidEncryptionKey": ""
   },
   "errors": {
-    "unsupportedFileType": "Tipo de ficheiro non soportado.",
-    "imageInsertError": "Non se puido inserir a imaxe. Probe de novo máis tarde...",
-    "fileTooBig": "O ficheiro é demasiado grande. O tamaño máximo permitido é {{maxSize}}.",
-    "svgImageInsertError": "Non se puido inserir como imaxe SVG. O marcado SVG semella inválido.",
-    "invalidSVGString": "SVG inválido.",
-    "cannotResolveCollabServer": "Non se puido conectar ao servidor de colaboración. Por favor recargue a páxina e probe de novo.",
-    "importLibraryError": "Non se puido cargar a biblioteca",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "unsupportedFileType": "",
+    "imageInsertError": "",
+    "fileTooBig": "",
+    "svgImageInsertError": "",
+    "invalidSVGString": "",
+    "cannotResolveCollabServer": "",
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Selección",
-    "image": "Inserir imaxe",
+    "image": "",
     "rectangle": "Rectángulo",
     "diamond": "Diamante",
     "ellipse": "Elipse",
@@ -217,240 +214,230 @@
     "text": "Texto",
     "library": "Biblioteca",
     "lock": "Manter a ferramenta seleccionada activa despois de debuxar",
-    "penMode": "Modo lapis - evitar o contacto",
-    "link": "Engadir/ Actualizar ligazón para a forma seleccionada",
-    "eraser": "Goma de borrar"
+    "penMode": "",
+    "link": "",
+    "eraser": ""
   },
   "headings": {
     "canvasActions": "Accións do lenzo",
-    "selectedShapeActions": "Accións da forma seleccionada",
-    "shapes": "Formas"
+    "selectedShapeActions": "",
+    "shapes": ""
   },
   "hints": {
-    "canvasPanning": "Para mover o lenzo, manteña a roda do rato ou a barra de espazo mentres arrastra",
-    "linearElement": "Faga clic para iniciar varios puntos, arrastre para unha sola liña",
-    "freeDraw": "Fai clic e arrastra, solta cando acabes",
-    "text": "Consello: tamén podes engadir texto facendo dobre-clic en calquera lugar coa ferramenta de selección",
-    "text_selected": "Dobre-clic ou prema ENTER para editar o texto",
-    "text_editing": "Prema Escape ou CtrlOrCmd+ENTER para finalizar a edición",
-    "linearElementMulti": "Faga clic no último punto ou prema Escape ou Enter para rematar",
-    "lockAngle": "Pode reducir o ángulo mantendo SHIFT",
-    "resize": "Pode reducir as proporcións mantendo SHIFT mentres axusta o tamaño,\nmanteña ALT para axustalo dende o centro",
-    "resizeImage": "Pode axustar o tamaño libremente mantendo SHIFT,\nmanteña ALT para axustalo dende o centro",
-    "rotate": "Podes reducir os ángulos mantendo SHIFT mentres os rotas",
-    "lineEditor_info": "Manteña pulsado CtrlOrCmd e faga dobre clic ou prema CtrlOrCmd + Enter para editar puntos",
-    "lineEditor_pointSelected": "Prema Suprimir para eliminar o(s) punto(s)\nCtrlOrCmd+D para duplicalos, ou arrastre para movelos",
-    "lineEditor_nothingSelected": "Seleccione un punto para editar (manteña pulsado SHIFT para selección múltiple),\nou manteña pulsado Alt e faga clic para engadir novos puntos",
-    "placeImage": "Faga clic para colocar a imaxe, ou faga clic e arrastre para establecer o seu tamaño manualmente",
-    "publishLibrary": "Publica a túa propia biblioteca",
-    "bindTextToElement": "Prema a tecla enter para engadir texto",
-    "deepBoxSelect": "Manteña pulsado CtrlOrCmd para seleccionar en profundidade e evitar o arrastre",
-    "eraserRevert": "Manteña pulsado Alt para reverter os elementos marcados para a súa eliminación"
+    "canvasPanning": "",
+    "linearElement": "",
+    "freeDraw": "",
+    "text": "",
+    "text_selected": "",
+    "text_editing": "",
+    "linearElementMulti": "",
+    "lockAngle": "",
+    "resize": "",
+    "resizeImage": "",
+    "rotate": "",
+    "lineEditor_info": "",
+    "lineEditor_pointSelected": "",
+    "lineEditor_nothingSelected": "",
+    "placeImage": "",
+    "publishLibrary": "",
+    "bindTextToElement": "",
+    "deepBoxSelect": "",
+    "eraserRevert": ""
   },
   "canvasError": {
-    "cannotShowPreview": "Non se pode mostrar a vista previa",
-    "canvasTooBig": "Pode que o lenzo sexa demasiado grande.",
-    "canvasTooBigTip": "Consello: Probe a acercar un pouco os elementos máis afastados."
+    "cannotShowPreview": "",
+    "canvasTooBig": "",
+    "canvasTooBigTip": ""
   },
   "errorSplash": {
-    "headingMain_pre": "Atopouse un erro. Probe ",
-    "headingMain_button": "recargando a páxina.",
-    "clearCanvasMessage": "Se recargar non funcionou, probe ",
-    "clearCanvasMessage_button": "limpando o lenzo.",
-    "clearCanvasCaveat": " Isto resultará nunha perda do seu traballo ",
-    "trackedToSentry_pre": "O erro con identificador ",
-    "trackedToSentry_post": " foi rastrexado no noso sistema.",
-    "openIssueMessage_pre": "Fomos moi cautelosos de non incluír a información da súa escena no erro. Se a súa escena non é privada, por favor, considere o seguimento do noso ",
-    "openIssueMessage_button": "rastrexador de erros.",
-    "openIssueMessage_post": " Por favor inclúa a seguinte información copiándoa e pegándoa na issue de Github.",
-    "sceneContent": "Contido da escena:"
+    "headingMain_pre": "",
+    "headingMain_button": "",
+    "clearCanvasMessage": "",
+    "clearCanvasMessage_button": "",
+    "clearCanvasCaveat": "",
+    "trackedToSentry_pre": "",
+    "trackedToSentry_post": "",
+    "openIssueMessage_pre": "",
+    "openIssueMessage_button": "",
+    "openIssueMessage_post": "",
+    "sceneContent": ""
   },
   "roomDialog": {
-    "desc_intro": "Podes invitar xente a colaborar contigo na túa escena actual.",
-    "desc_privacy": "Non te preocupes, a sesión usa cifrado de punto a punto, polo que calquera cousa que debuxes mantense privada. Nin tan sequera o noso servidor será capaz de ver o que fas.",
-    "button_startSession": "Comezar sesión",
-    "button_stopSession": "Rematar sesión",
-    "desc_inProgressIntro": "A sesión de colaboración en directo está agora en progreso.",
-    "desc_shareLink": "Comparte esta ligazón con calquera que queiras colaborar:",
-    "desc_exitSession": "Deter a sesión desconectarao da sala, pero poderá seguir traballando coa escena de maneira local. Teña en conta que isto non afectará a outras persoas, que poderán seguir colaborando na súa versión.",
-    "shareTitle": "Únase a unha sesión de colaboración en directo en Excalidraw"
+    "desc_intro": "",
+    "desc_privacy": "",
+    "button_startSession": "",
+    "button_stopSession": "",
+    "desc_inProgressIntro": "",
+    "desc_shareLink": "",
+    "desc_exitSession": "",
+    "shareTitle": ""
   },
   "errorDialog": {
     "title": "Erro"
   },
   "exportDialog": {
-    "disk_title": "Gardar no disco",
-    "disk_details": "Exporte os datos da escena a un ficheiro que poderás importar máis tarde.",
-    "disk_button": "Gardar nun ficheiro",
-    "link_title": "Ligazón para compartir",
-    "link_details": "Exportar como unha ligazón de só lectura.",
-    "link_button": "Exportar a unha ligazón",
-    "excalidrawplus_description": "Garde a escena no seu espazo de traballo en Excalidraw+.",
-    "excalidrawplus_button": "Exportar",
-    "excalidrawplus_exportError": "Non se puido exportar a Excalidraw+ neste momento..."
+    "disk_title": "",
+    "disk_details": "",
+    "disk_button": "",
+    "link_title": "",
+    "link_details": "",
+    "link_button": "",
+    "excalidrawplus_description": "",
+    "excalidrawplus_button": "",
+    "excalidrawplus_exportError": ""
   },
   "helpDialog": {
-    "blog": "Le o noso blog",
-    "click": "clic",
-    "deepSelect": "Selección en profundidade",
-    "deepBoxSelect": "Selección en profundidade dentro da caixa, evitando o arrastre",
-    "curvedArrow": "Frecha curva",
-    "curvedLine": "Liña curva",
-    "documentation": "Documentación",
-    "doubleClick": "dobre-clic",
-    "drag": "arrastrar",
-    "editor": "Editor",
-    "editSelectedShape": "Editar a forma seleccionada (texto/frecha/liña)",
-    "github": "Encontrou un problema? Envíeo",
-    "howto": "Sigue as nosas normas",
-    "or": "ou",
-    "preventBinding": "Evitar a unión de frechas",
-    "tools": "Ferramentas",
-    "shortcuts": "Atallos de teclado",
-    "textFinish": "Rematar de editar (editor de texto)",
-    "textNewLine": "Engadir unha nova liña (editor de texto)",
-    "title": "Axuda",
-    "view": "Vista",
-    "zoomToFit": "Zoom que se axuste a todos os elementos",
-    "zoomToSelection": "Zoom á selección",
-    "toggleElementLock": "Bloquear/desbloquear selección",
-    "movePageUpDown": "Mover páxina cara enriba/abaixo",
-    "movePageLeftRight": "Mover páxina cara a esquerda/dereita"
+    "blog": "",
+    "click": "",
+    "deepSelect": "",
+    "deepBoxSelect": "",
+    "curvedArrow": "",
+    "curvedLine": "",
+    "documentation": "",
+    "doubleClick": "",
+    "drag": "",
+    "editor": "",
+    "editSelectedShape": "",
+    "github": "",
+    "howto": "",
+    "or": "",
+    "preventBinding": "",
+    "tools": "",
+    "shortcuts": "",
+    "textFinish": "",
+    "textNewLine": "",
+    "title": "",
+    "view": "",
+    "zoomToFit": "",
+    "zoomToSelection": "",
+    "toggleElementLock": ""
   },
   "clearCanvasDialog": {
-    "title": "Limpar lenzo"
+    "title": ""
   },
   "publishDialog": {
-    "title": "Publicar biblioteca",
-    "itemName": "Nome do elemento",
-    "authorName": "Nome do autor",
-    "githubUsername": "Nome de usuario en Github",
-    "twitterUsername": "Nome de usuario en Twitter",
-    "libraryName": "Nome da biblioteca",
-    "libraryDesc": "Descrición da biblioteca",
-    "website": "Páxina web",
+    "title": "",
+    "itemName": "",
+    "authorName": "",
+    "githubUsername": "",
+    "twitterUsername": "",
+    "libraryName": "",
+    "libraryDesc": "",
+    "website": "",
     "placeholder": {
-      "authorName": "O seu nome ou nome de usuario",
-      "libraryName": "Nome da súa biblioteca",
-      "libraryDesc": "Descrición da súa biblioteca para axudar a xente a entender o seu uso",
-      "githubHandle": "Nome de usuario de GitHub (opcional), así poderás editar a biblioteca unha vez enviada para a súa revisión",
-      "twitterHandle": "Nome de usuario en Twitter(opcional), así sabemos a quen darlle crédito cando se lle de promoción a través de Twitter",
-      "website": "Ligazón ao teu sitio web persoal ou a outro sitio (opcional)"
+      "authorName": "",
+      "libraryName": "",
+      "libraryDesc": "",
+      "githubHandle": "",
+      "twitterHandle": "",
+      "website": ""
     },
     "errors": {
-      "required": "Obrigatorio",
-      "website": "Introduza unha URL válida"
+      "required": "",
+      "website": ""
     },
     "noteDescription": {
-      "pre": "Envíe a súa biblioteca para que sexa incluída no ",
-      "link": "repositorio público de bibliotecas",
-      "post": "para que outra xente a poida usar nos seus debuxos."
+      "pre": "",
+      "link": "",
+      "post": ""
     },
     "noteGuidelines": {
-      "pre": "A biblioteca necesita ser aprobada manualmente primeiro. Por favor, lea as ",
-      "link": "normas",
-      "post": " antes de ser enviado. Necesitarás unha conta de GitHub para comunicarte ou facer cambios se se solicitan, pero non é estritamente necesario."
+      "pre": "",
+      "link": "",
+      "post": ""
     },
     "noteLicense": {
-      "pre": "Ao enviar, estás de acordo con que a biblioteca sexa publicada baixo a ",
-      "link": "Licenza MIT, ",
-      "post": "o cal significa que, en resumo, calquera pode usalo sen restricións."
+      "pre": "",
+      "link": "",
+      "post": ""
     },
-    "noteItems": "Cada elemento da biblioteca debe ter o seu nome propio para que se poida filtrar. Os seguintes elementos da biblioteca serán incluídos:",
-    "atleastOneLibItem": "Por favor seleccione polo menos un elemento da biblioteca para comezar",
-    "republishWarning": "Nota: algúns dos elementos seleccionados están marcados como xa publicados/enviados. Só deberías reenviar elementos cando se actualice unha biblioteca ou envío."
+    "noteItems": "",
+    "atleastOneLibItem": "",
+    "republishWarning": ""
   },
   "publishSuccessDialog": {
-    "title": "Biblioteca enviada",
-    "content": "Grazas {{authorName}}. A súa biblioteca foi enviada para ser revisada. Pode seguir o estado",
-    "link": "aquí"
+    "title": "",
+    "content": "",
+    "link": ""
   },
   "confirmDialog": {
-    "resetLibrary": "Restablecer biblioteca",
-    "removeItemsFromLib": "Eliminar os elementos seleccionados da biblioteca"
+    "resetLibrary": "",
+    "removeItemsFromLib": ""
   },
   "encrypted": {
-    "tooltip": "Os teus debuxos están cifrados de punto a punto, polo que os servidores de Excalidraw nunca os verán.",
-    "link": "Entrada do blog acerca do cifrado de punto a punto en Excalidraw"
+    "tooltip": "",
+    "link": ""
   },
   "stats": {
-    "angle": "Ángulo",
-    "element": "Elemento",
-    "elements": "Elementos",
-    "height": "Alto",
-    "scene": "Escena",
-    "selected": "Seleccionado",
-    "storage": "Almacenamento",
-    "title": "Estadísticas para nerds",
-    "total": "Total",
-    "version": "Versión",
-    "versionCopy": "Faga clic para copiar",
-    "versionNotAvailable": "Versión non dispoñible",
-    "width": "Ancho"
+    "angle": "",
+    "element": "",
+    "elements": "",
+    "height": "",
+    "scene": "",
+    "selected": "",
+    "storage": "",
+    "title": "",
+    "total": "",
+    "version": "",
+    "versionCopy": "",
+    "versionNotAvailable": "",
+    "width": ""
   },
   "toast": {
-    "addedToLibrary": "Engadido á biblioteca",
-    "copyStyles": "Estilos copiados.",
-    "copyToClipboard": "Copiado ao portapapeis.",
-    "copyToClipboardAsPng": "Copiar {{exportSelection}} ao portapapeis como PNG\n({{exportColorScheme}})",
-    "fileSaved": "Ficheiro gardado.",
-    "fileSavedToFilename": "Gardado en {filename}",
-    "canvas": "lenzo",
-    "selection": "selección",
-    "pasteAsSingleElement": "Usa {{shortcut}} para pegar como un único elemento\nou pega nun editor de texto existente"
+    "addedToLibrary": "",
+    "copyStyles": "",
+    "copyToClipboard": "",
+    "copyToClipboardAsPng": "",
+    "fileSaved": "",
+    "fileSavedToFilename": "",
+    "canvas": "",
+    "selection": ""
   },
   "colors": {
-    "ffffff": "Branco",
-    "f8f9fa": "Gris 0",
-    "f1f3f5": "Gris 1",
-    "fff5f5": "Vermello 0",
-    "fff0f6": "Rosa 0",
-    "f8f0fc": "Uva 0",
-    "f3f0ff": "Violeta 0",
-    "edf2ff": "Índigo 0",
-    "e7f5ff": "Azul 0",
-    "e3fafc": "Ciano 0",
-    "e6fcf5": "Turquesa 0",
-    "ebfbee": "Verde 0",
-    "f4fce3": "Lima 0",
-    "fff9db": "Amarelo 0",
-    "fff4e6": "Laranxa 0",
-    "transparent": "Transparente",
-    "ced4da": "Gris 4",
-    "868e96": "Gris 6",
-    "fa5252": "Vermello 6",
-    "e64980": "Rosa 6",
-    "be4bdb": "Uva 6",
-    "7950f2": "Violeta 6",
-    "4c6ef5": "Índigo 6",
-    "228be6": "Azul 6",
-    "15aabf": "Ciano 6",
-    "12b886": "Turquesa 6",
-    "40c057": "Verde 6",
-    "82c91e": "Lima 6",
-    "fab005": "Amarelo 6",
-    "fd7e14": "Laranxa 6",
-    "000000": "Negro",
-    "343a40": "Gris 8",
-    "495057": "Gris 7",
-    "c92a2a": "Vermello 9",
-    "a61e4d": "Rosa 9",
-    "862e9c": "Uva 9",
-    "5f3dc4": "Violeta 9",
-    "364fc7": "Índigo 9",
-    "1864ab": "Azul 9",
-    "0b7285": "Ciano 9",
-    "087f5b": "Turquesa 9",
-    "2b8a3e": "Verde 9",
-    "5c940d": "Lima 9",
-    "e67700": "Amarelo 9",
-    "d9480f": "Laranxa 9"
-  },
-  "welcomeScreen": {
-    "data": "Toda a información é gardada de maneira local no seu navegador.",
-    "switchToPlusApp": "Queres ir a Excalidraw+ no seu lugar?",
-    "menuHints": "Exportar, preferencias, idiomas, ...",
-    "toolbarHints": "Escolle unha ferramenta & Comeza a debuxar!",
-    "helpHints": "Atallos & axuda"
+    "ffffff": "",
+    "f8f9fa": "",
+    "f1f3f5": "",
+    "fff5f5": "",
+    "fff0f6": "",
+    "f8f0fc": "",
+    "f3f0ff": "",
+    "edf2ff": "",
+    "e7f5ff": "",
+    "e3fafc": "",
+    "e6fcf5": "",
+    "ebfbee": "",
+    "f4fce3": "",
+    "fff9db": "",
+    "fff4e6": "",
+    "transparent": "",
+    "ced4da": "",
+    "868e96": "",
+    "fa5252": "",
+    "e64980": "",
+    "be4bdb": "",
+    "7950f2": "",
+    "4c6ef5": "",
+    "228be6": "",
+    "15aabf": "",
+    "12b886": "",
+    "40c057": "",
+    "82c91e": "",
+    "fab005": "",
+    "fd7e14": "",
+    "000000": "",
+    "343a40": "",
+    "495057": "",
+    "c92a2a": "",
+    "a61e4d": "",
+    "862e9c": "",
+    "5f3dc4": "",
+    "364fc7": "",
+    "1864ab": "",
+    "0b7285": "",
+    "087f5b": "",
+    "2b8a3e": "",
+    "5c940d": "",
+    "e67700": "",
+    "d9480f": ""
   }
 }

src/locales/he-IL.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "הדבק",
-    "pasteAsPlaintext": "",
     "pasteCharts": "הדבק גרפים",
     "selectAll": "בחר הכל",
     "multiSelect": "הוסף אובייקט לבחירה",
@@ -72,7 +71,7 @@
     "layers": "שכבות",
     "actions": "פעולות",
     "language": "שפה",
-    "liveCollaboration": "",
+    "liveCollaboration": "התחל שיתוף חי",
     "duplicateSelection": "שכפל",
     "untitled": "ללא כותרת",
     "name": "שם",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "אפס את הלוח",
     "exportJSON": "ייצא לקובץ",
-    "exportImage": "ייצוא התמונה...",
-    "export": "שמור ל...",
+    "exportImage": "שמירה כתמונה",
+    "export": "ייצא",
     "exportToPng": "יצא ל PNG",
     "exportToSvg": "יצא ל SVG",
     "copyToClipboard": "העתק ללוח",
@@ -145,7 +144,7 @@
     "scale": "קנה מידה",
     "save": "שמירת קובץ נוכחי",
     "saveAs": "שמירה בשם",
-    "load": "פתח",
+    "load": "טען",
     "getShareableLink": "קבל קישור לשיתוף",
     "close": "סגור",
     "selectLanguage": "בחר שפה",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "לא ניתן היה להטמיע את תמונת ה-SVG. קידוד ה-SVG אינו תקני.",
     "invalidSVGString": "SVG בלתי תקני.",
     "cannotResolveCollabServer": "",
-    "importLibraryError": "לא ניתן היה לטעון את הספריה",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": "לא ניתן היה לטעון את הספריה"
   },
   "toolBar": {
     "selection": "בחירה",
@@ -238,7 +235,7 @@
     "resize": "ניתן להגביל פרופורציות על ידי לחיצה על SHIFT תוך כדי שינוי גודל,\nהחזק ALT בשביל לשנות גודל ביחס למרכז",
     "resizeImage": "",
     "rotate": "ניתן להגביל זוויות על ידי לחיצה על SHIFT תוך כדי סיבוב",
-    "lineEditor_info": "",
+    "lineEditor_info": "לחץ לחיצה כפולה או אנטר לעריכת הנקודות",
     "lineEditor_pointSelected": "",
     "lineEditor_nothingSelected": "",
     "placeImage": "",
@@ -313,9 +310,7 @@
     "view": "תצוגה",
     "zoomToFit": "גלילה להצגת כל האלמנטים במסך",
     "zoomToSelection": "התמקד בבחירה",
-    "toggleElementLock": "נעילה/ביטול הנעילה של הרכיבים הנבחרים",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": "נעילה/ביטול הנעילה של הרכיבים הנבחרים"
   },
   "clearCanvasDialog": {
     "title": "ניקוי הקנבס"
@@ -396,8 +391,7 @@
     "fileSaved": "קובץ נשמר.",
     "fileSavedToFilename": "נשמר לקובץ {filename}",
     "canvas": "משטח ציור",
-    "selection": "בחירה",
-    "pasteAsSingleElement": ""
+    "selection": "בחירה"
   },
   "colors": {
     "ffffff": "לבן",
@@ -445,12 +439,5 @@
     "5c940d": "ליים 9",
     "e67700": "ירוק 9",
     "d9480f": "כתום 9"
-  },
-  "welcomeScreen": {
-    "data": "",
-    "switchToPlusApp": "",
-    "menuHints": "",
-    "toolbarHints": "",
-    "helpHints": ""
   }
 }

src/locales/hi-IN.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "चिपकाएँ",
-    "pasteAsPlaintext": "सादे पाठ के रूप में चिपकाएं",
     "pasteCharts": "चार्ट चिपकाएँ",
     "selectAll": "सभी चुनें",
     "multiSelect": "आकार को चयन में जोड़ें",
@@ -53,7 +52,7 @@
     "large": "बड़ा",
     "veryLarge": "बहुत बड़ा",
     "solid": "दृढ़",
-    "hachure": "हैशूर",
+    "hachure": "हाचुरे",
     "crossHatch": "क्रॉस हैच",
     "thin": "पतला",
     "bold": "मोटा",
@@ -72,7 +71,7 @@
     "layers": "परतें",
     "actions": "कार्रवाई",
     "language": "भाषा",
-    "liveCollaboration": "जीवंत सहयोग...",
+    "liveCollaboration": "जीवंत सहयोग",
     "duplicateSelection": "डुप्लिकेट",
     "untitled": "अशीर्षित",
     "name": "नाम",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "कैनवास रीसेट करें",
     "exportJSON": "",
-    "exportImage": "प्रतिमा निर्यात करे...",
-    "export": "यंहा सुरक्षित करे...",
+    "exportImage": "",
+    "export": "निर्यात",
     "exportToPng": "पीएनजी के रूप में निर्यात करे",
     "exportToSvg": "Svg के रूप में निर्यात करे",
     "copyToClipboard": "क्लिपबोर्ड पर प्रतिलिपि बनाएँ",
@@ -145,7 +144,7 @@
     "scale": "पैमाना",
     "save": "",
     "saveAs": "सेव करे इस तरह",
-    "load": "खोलें",
+    "load": "लोड करें",
     "getShareableLink": "साझा करने योग्य लिंक प्राप्त करें",
     "close": "बंद करें",
     "selectLanguage": "भाषा चुनें",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "एसवीजी छवि सम्मिलित नहीं कर सके, एसवीजी रचना अनुचित हैं",
     "invalidSVGString": "अनुचित SVG",
     "cannotResolveCollabServer": "कॉलेब सर्वर से कनेक्शन नहीं हो पा रहा. कृपया पृष्ठ को पुनः लाने का प्रयास करे.",
-    "importLibraryError": "संग्रह प्रतिष्ठापित नहीं किया जा सका",
-    "collabSaveFailed": "किसी कारण वश अंदरूनी डेटाबेस में सहेजा नहीं जा सका। यदि समस्या बनी रहती है, तो किये काम को खोने न देने के लिये अपनी फ़ाइल को स्थानीय रूप से सहेजे।",
-    "collabSaveFailed_sizeExceeded": "लगता है कि पृष्ठ तल काफ़ी बड़ा है, इस्कारण अंदरूनी डेटाबेस में सहेजा नहीं जा सका। किये काम को खोने न देने के लिये अपनी फ़ाइल को स्थानीय रूप से सहेजे।"
+    "importLibraryError": "संग्रह प्रतिष्ठापित नहीं किया जा सका"
   },
   "toolBar": {
     "selection": "चयन",
@@ -217,7 +214,7 @@
     "text": "पाठ",
     "library": "लाइब्रेरी",
     "lock": "ड्राइंग के बाद चयनित टूल को सक्रिय रखें",
-    "penMode": "पेन का मोड - स्पर्श टाले",
+    "penMode": "",
     "link": "",
     "eraser": "रबड़"
   },
@@ -238,7 +235,7 @@
     "resize": "आकार बदलते समय आप SHIFT को पकड़ कर अनुपात में कमी कर सकते हैं,\nकेंद्र से आकार बदलने के लिए ALT दबाए रखें",
     "resizeImage": "",
     "rotate": "आप घूर्णन करते समय SHIFT पकड़कर कोणों को विवश कर सकते हैं",
-    "lineEditor_info": "बिंदुओं को सम्पादित करने के लिए CtrlOrCmd को दबायें रखते हुये डबल क्लिक करे, अथवा CtrlOrCmd + Enter साथ दबाये",
+    "lineEditor_info": "बिंदुओं को संपादित करने के लिए Enter पर डबल-क्लिक करें या दबाएँ",
     "lineEditor_pointSelected": "",
     "lineEditor_nothingSelected": "",
     "placeImage": "",
@@ -313,9 +310,7 @@
     "view": "दृश्य",
     "zoomToFit": "सभी तत्वों को फिट करने के लिए ज़ूम करें",
     "zoomToSelection": "चयन तक ज़ूम करे",
-    "toggleElementLock": "ताले के अंदर/बाहर चुनाव",
-    "movePageUpDown": "पृष्ठ ऊपर/नीचे करे",
-    "movePageLeftRight": "पृष्ठ बायी/दायी तरफ करे"
+    "toggleElementLock": "ताले के अंदर/बाहर चुनाव"
   },
   "clearCanvasDialog": {
     "title": ""
@@ -396,8 +391,7 @@
     "fileSaved": "",
     "fileSavedToFilename": "",
     "canvas": "",
-    "selection": "",
-    "pasteAsSingleElement": "एक अवयव के रूप में चिपकाने के लिए {{shortcut}} का उपयोग करें,\nया किसी मौजूदा पाठ संपादक में चिपकायें"
+    "selection": ""
   },
   "colors": {
     "ffffff": "सफेद",
@@ -445,12 +439,5 @@
     "5c940d": "",
     "e67700": "पीला",
     "d9480f": "नारंगी"
-  },
-  "welcomeScreen": {
-    "data": "आपका सर्व डेटा ब्राउज़र के भीतर स्थानिक जगह पे सुरक्षित किया गया.",
-    "switchToPlusApp": "बजाय आपको Excalidraw+ जगह जाना है?",
-    "menuHints": "निर्यात, पसंद, भाषायें, ...",
-    "toolbarHints": "औजार चुने और चित्रकारी प्रारंभ करे!",
-    "helpHints": "शॉर्ट्कट & सहाय्य"
   }
 }

src/locales/hu-HU.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Beillesztés",
-    "pasteAsPlaintext": "",
     "pasteCharts": "Grafikon beillesztése",
     "selectAll": "Összes kijelölése",
     "multiSelect": "Elem hozzáadása a kijelöléshez",
@@ -72,7 +71,7 @@
     "layers": "Rétegek",
     "actions": "Műveletek",
     "language": "Nyelv",
-    "liveCollaboration": "",
+    "liveCollaboration": "Élő együttműködés",
     "duplicateSelection": "Duplikálás",
     "untitled": "Névtelen",
     "name": "Név",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Vászon törlése",
     "exportJSON": "Exportálás fájlba",
-    "exportImage": "",
-    "export": "",
+    "exportImage": "Mentés képként",
+    "export": "Exportálás",
     "exportToPng": "Exportálás PNG-be",
     "exportToSvg": "Exportálás SVG-be",
     "copyToClipboard": "Vágólapra másolás",
@@ -145,7 +144,7 @@
     "scale": "Nagyítás",
     "save": "Mentés az aktuális fájlba",
     "saveAs": "Mentés másként",
-    "load": "",
+    "load": "Betöltés",
     "getShareableLink": "Megosztható link létrehozása",
     "close": "Bezárás",
     "selectLanguage": "Nyelv kiválasztása",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "Nem sikerült beszúrni az SVG-képet. Az SVG szintaktika érvénytelennek tűnik.",
     "invalidSVGString": "Érvénytelen SVG.",
     "cannotResolveCollabServer": "",
-    "importLibraryError": "",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": ""
   },
   "toolBar": {
     "selection": "Kijelölés",
@@ -217,7 +214,7 @@
     "text": "Szöveg",
     "library": "Könyvtár",
     "lock": "Rajzolás után az aktív eszközt tartsa kijelölve",
-    "penMode": "",
+    "penMode": "Akadályozza meg a kicsinyítést, és csak tollról fogadja el a szabadkézi bevitelt",
     "link": "Hivatkozás hozzáadása/frissítése a kiválasztott alakzathoz",
     "eraser": ""
   },
@@ -238,7 +235,7 @@
     "resize": "A SHIFT billentyű lenyomva tartásával az átméretezés megtartja az arányokat,\naz ALT lenyomva tartásával pedig a középpont egy helyben marad",
     "resizeImage": "A SHIFT billentyű lenyomva tartásával szabadon átméretezheted,\ntartsd lenyomva az ALT billentyűt a középről való átméretezéshez",
     "rotate": "A SHIFT billentyű lenyomva tartásával korlátozhatja a szögek illesztését",
-    "lineEditor_info": "",
+    "lineEditor_info": "Kattints duplán, vagy nyomj entert a pontok szerkesztéséhez",
     "lineEditor_pointSelected": "Nyomd meg a Törlés gombot a pont(ok) eltávolításához,\nA Ctrl/Cmd+D a többszörözéshez, vagy húzással mozgathatja",
     "lineEditor_nothingSelected": "Válaszd ki a szerkeszteni kívánt pontot (több kijelöléséhez tartsd lenyomva a SHIFT billentyűt),\nvagy Alt, és kattintson az új pontok hozzáadásához",
     "placeImage": "Kattints a kép elhelyezéséhez, vagy kattints és méretezd manuálisan",
@@ -313,9 +310,7 @@
     "view": "Nézet",
     "zoomToFit": "Az összes elem látótérbe hozása",
     "zoomToSelection": "Kijelölésre nagyítás",
-    "toggleElementLock": "",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
+    "toggleElementLock": ""
   },
   "clearCanvasDialog": {
     "title": "Rajzvászon alaphelyzetbe"
@@ -396,8 +391,7 @@
     "fileSaved": "Fájl elmentve.",
     "fileSavedToFilename": "Mentve mint {filename}",
     "canvas": "rajzvászon",
-    "selection": "kijelölés",
-    "pasteAsSingleElement": ""
+    "selection": "kijelölés"
   },
   "colors": {
     "ffffff": "Fehér",
@@ -447,10 +441,9 @@
     "d9480f": "Narancs 9"
   },
   "welcomeScreen": {
-    "data": "",
-    "switchToPlusApp": "",
-    "menuHints": "",
-    "toolbarHints": "",
-    "helpHints": ""
+    "data": "Minden adatodat kizárólag a böngésződben tároljuk.",
+    "menuHints": "Export, beállítások, nyelvek, ...",
+    "toolbarHints": "Válassz egy eszközt & kezdj alkotni!",
+    "helpHints": "Gyorsbillentyűk & súgó"
   }
 }

src/locales/id-ID.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Tempel",
-    "pasteAsPlaintext": "Tempel sebagai teks biasa",
     "pasteCharts": "Tempel diagram",
     "selectAll": "Pilih semua",
     "multiSelect": "Tambahkan elemen ke pilihan",
@@ -72,7 +71,7 @@
     "layers": "Lapisan",
     "actions": "Aksi",
     "language": "Bahasa",
-    "liveCollaboration": "Kolaborasi langsung...",
+    "liveCollaboration": "Kolaborasi langsung",
     "duplicateSelection": "Duplikat",
     "untitled": "Tanpa judul",
     "name": "Nama",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Setel Ulang Kanvas",
     "exportJSON": "Ekspor ke file",
-    "exportImage": "Ekspor gambar...",
-    "export": "Simpan ke...",
+    "exportImage": "Simpan gambar",
+    "export": "Ekspor",
     "exportToPng": "Ekspor ke PNG",
     "exportToSvg": "Ekspor ke SVG",
     "copyToClipboard": "Salin ke Papan Klip",
@@ -145,7 +144,7 @@
     "scale": "Skala",
     "save": "Simpan ke file sekarang",
     "saveAs": "Simpan sebagai",
-    "load": "Buka",
+    "load": "Muat",
     "getShareableLink": "Buat Tautan yang Bisa Dibagian",
     "close": "Tutup",
     "selectLanguage": "Pilih bahasa",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "Tidak dapat menyisipkan gambar SVG. Markup SVG sepertinya tidak valid.",
     "invalidSVGString": "SVG tidak valid.",
     "cannotResolveCollabServer": "Tidak dapat terhubung ke server kolab. Muat ulang laman dan coba lagi.",
-    "importLibraryError": "Tidak dapat memuat pustaka",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": "Tidak dapat memuat pustaka"
   },
   "toolBar": {
     "selection": "Pilihan",
@@ -217,7 +214,7 @@
     "text": "Teks",
     "library": "Pustaka",
     "lock": "Biarkan alat yang dipilih aktif setelah menggambar",
-    "penMode": "Mode pena - mencegah sentuhan",
+    "penMode": "Cegah jepit perbesar dan terima hanya input freedraw dari pena",
     "link": "Tambah/Perbarui tautan untuk bentuk yang dipilih",
     "eraser": "Penghapus"
   },
@@ -238,7 +235,7 @@
     "resize": "Anda dapat menjaga proposi dengan menekan SHIFT sambil mengubah ukuran,\ntekan AlT untuk mengubah ukuran dari tengah",
     "resizeImage": "Anda dapat mengubah secara bebas dengan menekan SHIFT,\nTekan ALT untuk mengubah dari tengah",
     "rotate": "Anda dapat menjaga sudut dengan menahan SHIFT sambil memutar",
-    "lineEditor_info": "Tekan Ctrl/Cmd dan Dobel-klik atau tekan Ctrl/Cmd +Enter untuk mengedit poin",
+    "lineEditor_info": "Klik ganda atau tekan Enter untuk mengedit titik",
     "lineEditor_pointSelected": "Tekan Delete untuk menghapus titik, Ctrl/Cmd + D untuk menduplikasi, atau seret untuk memindahkan",
     "lineEditor_nothingSelected": "Pilih titik untuk mengedit (tekan SHIFT untuk pilih banyak), atau tekan Alt dan klik untuk tambahkan titik baru",
     "placeImage": "Klik untuk tempatkan gambar, atau klik dan jatuhkan untuk tetapkan ukuran secara manual",
@@ -313,9 +310,7 @@
     "view": "Tampilan",
     "zoomToFit": "Perbesar agar sesuai dengan semua elemen",
     "zoomToSelection": "Perbesar ke seleksi",
-    "toggleElementLock": "Kunci/lepas seleksi",
-    "movePageUpDown": "Pindah halaman keatas/kebawah",
-    "movePageLeftRight": "Pindah halaman kebawah/keatas"
+    "toggleElementLock": "Kunci/lepas seleksi"
   },
   "clearCanvasDialog": {
     "title": "Hapus kanvas"
@@ -396,8 +391,7 @@
     "fileSaved": "File tersimpan.",
     "fileSavedToFilename": "Disimpan ke {filename}",
     "canvas": "kanvas",
-    "selection": "pilihan",
-    "pasteAsSingleElement": "Gunakan {{shortcut}} untuk menempelkan sebagai satu elemen,\natau tempelkan ke teks editor yang ada"
+    "selection": "pilihan"
   },
   "colors": {
     "ffffff": "Putih",
@@ -445,12 +439,5 @@
     "5c940d": "Lime 9",
     "e67700": "Kuning 9",
     "d9480f": "Jingga 9"
-  },
-  "welcomeScreen": {
-    "data": "Semua data Anda tersimpan secara lokal di browser.",
-    "switchToPlusApp": "Apa Anda ingin berpindah ke Excalidraw+?",
-    "menuHints": "Ekspor, preferensi, bahasa, ...",
-    "toolbarHints": "Ambil alat & mulai menggambar!",
-    "helpHints": "Pintasan & bantuan"
   }
 }

src/locales/it-IT.json

@@ -1,7 +1,6 @@
 {
   "labels": {
     "paste": "Incolla",
-    "pasteAsPlaintext": "Incolla come testo normale",
     "pasteCharts": "Incolla grafici",
     "selectAll": "Seleziona tutto",
     "multiSelect": "Aggiungi elemento alla selezione",
@@ -72,7 +71,7 @@
     "layers": "Livelli",
     "actions": "Azioni",
     "language": "Lingua",
-    "liveCollaboration": "Collaborazione dal vivo...",
+    "liveCollaboration": "Collaborazione live",
     "duplicateSelection": "Duplica",
     "untitled": "Senza titolo",
     "name": "Nome",
@@ -136,8 +135,8 @@
   "buttons": {
     "clearReset": "Svuota la tela",
     "exportJSON": "Esporta su file",
-    "exportImage": "Esporta immagine...",
-    "export": "Salva in...",
+    "exportImage": "Salva come immagine",
+    "export": "Esporta",
     "exportToPng": "Esporta come PNG",
     "exportToSvg": "Esporta come SVG",
     "copyToClipboard": "Copia negli appunti",
@@ -145,7 +144,7 @@
     "scale": "Scala",
     "save": "Salva sul file corrente",
     "saveAs": "Salva con nome",
-    "load": "Apri",
+    "load": "Carica",
     "getShareableLink": "Ottieni link condivisibile",
     "close": "Chiudi",
     "selectLanguage": "Seleziona lingua",
@@ -201,9 +200,7 @@
     "svgImageInsertError": "Impossibile inserire l'immagine SVG. Il markup SVG non sembra corretto.",
     "invalidSVGString": "SVG non valido.",
     "cannotResolveCollabServer": "Impossibile connettersi al server di collab. Ricarica la pagina e riprova.",
-    "importLibraryError": "Impossibile caricare la libreria",
-    "collabSaveFailed": "",
-    "collabSaveFailed_sizeExceeded": ""
+    "importLibraryError": "Impossibile caricare la libreria"
   },
   "toolBar": {
     "selection": "Selezione",
@@ -217,7 +214,7 @@
     "text": "Testo",
     "library": "Libreria",
     "lock": "Mantieni lo strumento selezionato attivo dopo aver disegnato",
-    "penMode": "Modalità penna - previene il tocco",
+    "penMode": "Impedisci il pinch-zoom e accetta l'input di disegno libero solo dalla penna",
     "link": "Aggiungi/ aggiorna il link per una forma selezionata",
     "eraser": "Gomma"
   },
@@ -238,7 +235,7 @@
     "resize": "Per vincolare le proporzioni, tieni premuto MAIUSC durante il ridimensionamento;\nper ridimensionare dal centro, tieni premuto ALT",
     "resizeImage": "Puoi ridimensionare liberamente tenendo premuto SHIFT,\ntieni premuto ALT per ridimensionare dal centro",
     "rotate": "Puoi mantenere gli angoli tenendo premuto SHIFT durante la rotazione",
-    "lineEditor_info": "Tieni premuto Ctrl o Cmd e doppio clic oppure premi Ctrl o Cmd + Invio per modificare i punti",
+    "lineEditor_info": "Fai doppio click o premi invio per modificare i punti",
     "lineEditor_pointSelected": "Premi Elimina per rimuovere il punto(i),\nCtrlOCmd+D per duplicare o trascinare per spostare",
     "lineEditor_nothingSelected": "Seleziona un punto da modificare (tieni premuto MAIUSC per selezionare più punti),\noppure tieni premuto Alt e fai clic per aggiungere nuovi punti",
     "placeImage": "Fai click per posizionare l'immagine, o click e trascina per impostarne la dimensione manualmente",
@@ -313,9 +310,7 @@
     "view": "Vista",
     "zoomToFit": "Adatta zoom per mostrare tutti gli elementi",
     "zoomToSelection": "Zoom alla selezione",
-    "toggleElementLock": "Blocca/sblocca selezione",
-    "movePageUpDown": "Sposta la pagina su/giù",
-    "movePageLeftRight": "Sposta la pagina a sinistra/destra"
+    "toggleElementLock": "Blocca/sblocca selezione"
   },
   "clearCanvasDialog": {
     "title": "Svuota la tela"
@@ -396,8 +391,7 @@
     "fileSaved": "File salvato.",
     "fileSavedToFilename": "Salvato in {filename}",
     "canvas": "tela",
-    "selection": "selezione",
-    "pasteAsSingleElement": "Usa {{shortcut}} per incollare come un singolo elemento,\no incollare in un editor di testo esistente"
+    "selection": "selezione"
   },
   "colors": {
     "ffffff": "Bianco",
@@ -445,12 +439,5 @@
     "5c940d": "Lime 9",
     "e67700": "Giallo 9",
     "d9480f": "Arancio 9"
-  },
-  "welcomeScreen": {
-    "data": "Tutti i tuoi dati sono salvati localmente nel browser.",
-    "switchToPlusApp": "Volevi invece andare su Excalidraw+?",
-    "menuHints": "Esporta, preferenze, lingue, ...",
-    "toolbarHints": "Scegli uno strumento & Inizia a disegnare!",
-    "helpHints": "Scorciatoie & aiuto"
   }
 }