show autosave checkbox only if fileHandle exists

# Conflicts:
#	src/tests/__snapshots__/regressionTests.test.tsx.snap

.env

@@ -1,5 +1,5 @@
 REACT_APP_BACKEND_V1_GET_URL=https://json.excalidraw.com/api/v1/
 REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
 REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
-REACT_APP_SOCKET_SERVER_URL=https://excalidraw-portal.uc.r.appspot.com
+REACT_APP_SOCKET_SERVER_URL=https://portal.excalidraw.com
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'

.gitignore

@@ -20,3 +20,4 @@ package-lock.json
 static
 yarn-debug.log*
 yarn-error.log*
+src/packages/excalidraw/types

package.json

@@ -21,18 +21,18 @@
   "dependencies": {
     "@sentry/browser": "6.2.2",
     "@sentry/integrations": "6.2.1",
-    "@testing-library/jest-dom": "5.11.9",
+    "@testing-library/jest-dom": "5.11.10",
     "@testing-library/react": "11.2.5",
-    "@types/jest": "26.0.21",
+    "@types/jest": "26.0.22",
     "@types/react": "17.0.3",
     "@types/react-dom": "17.0.2",
     "@types/socket.io-client": "1.4.36",
-    "browser-fs-access": "0.15.3",
+    "browser-fs-access": "0.16.2",
     "clsx": "1.1.1",
     "firebase": "8.2.10",
     "i18next-browser-languagedetector": "6.0.1",
     "lodash.throttle": "4.1.1",
-    "nanoid": "3.1.21",
+    "nanoid": "3.1.22",
     "open-color": "1.8.0",
     "pako": "1.0.11",
     "png-chunk-text": "1.0.0",
@@ -40,8 +40,8 @@
     "png-chunks-extract": "1.0.0",
     "points-on-curve": "0.2.0",
     "pwacompat": "2.0.17",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-scripts": "4.0.3",
     "roughjs": "4.3.1",
     "sass": "1.32.8",

public/index.html

@@ -51,8 +51,7 @@
       name="twitter:description"
       content="Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
     />
-    <!-- OG tags require absolute url for images -->
-    <meta name="twitter:image" content="https://excalidraw.com/og-image.png" />
+
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
     <!-- Excalidraw version -->
@@ -148,6 +147,9 @@
         color: var(--popup-text-color);
         font-size: 1.3em;
       }
+      #root {
+        height: 100%;
+      }
     </style>
   </head>
 

public/manifest.json

@@ -39,5 +39,37 @@
         }
       ]
     }
-  }
+  },
+  "screenshots": [
+    {
+      "src": "/screenshots/virtual-whiteboard.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    },
+    {
+      "src": "/screenshots/wireframe.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    },
+    {
+      "src": "/screenshots/illustration.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    },
+    {
+      "src": "/screenshots/shapes.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    },
+    {
+      "src": "/screenshots/collaboration.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    },
+    {
+      "src": "/screenshots/export.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    }
+  ]
 }

src/actions/actionCanvas.tsx

@@ -8,7 +8,7 @@ import { getCommonBounds, getNonDeletedElements } from "../element";
 import { newElementWith } from "../element/mutateElement";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom, getSelectedElements } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
@@ -33,6 +33,7 @@ export const actionChangeViewBackgroundColor = register({
           type="canvasBackground"
           color={appState.viewBackgroundColor}
           onChange={(color) => updateData(color)}
+          data-testid="canvas-background-picker"
         />
       </div>
     );
@@ -72,6 +73,7 @@ export const actionClearCanvas = register({
           updateData(null);
         }
       }}
+      data-testid="clear-canvas-button"
     />
   ),
 });

src/actions/actionExport.tsx

@@ -8,7 +8,7 @@ import { Tooltip } from "../components/Tooltip";
 import { DarkModeToggle, Appearence } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { supported } from "browser-fs-access";
@@ -136,6 +136,7 @@ export const actionSaveScene = register({
       aria-label={t("buttons.save")}
       showAriaLabel={useIsMobile()}
       onClick={() => updateData(null)}
+      data-testid="save-button"
     />
   ),
 });
@@ -167,6 +168,7 @@ export const actionSaveAsScene = register({
       showAriaLabel={useIsMobile()}
       hidden={!supported}
       onClick={() => updateData(null)}
+      data-testid="save-as-button"
     />
   ),
 });
@@ -204,6 +206,7 @@ export const actionLoadScene = register({
       aria-label={t("buttons.load")}
       showAriaLabel={useIsMobile()}
       onClick={updateData}
+      data-testid="load-button"
     />
   ),
 });
@@ -235,3 +238,37 @@ export const actionExportWithDarkMode = register({
     </div>
   ),
 });
+
+export const actionToggleAutosave = register({
+  name: "toggleAutosave",
+  perform(elements, appState) {
+    trackEvent("toggle", "autosave");
+    return {
+      appState: {
+        ...appState,
+        autosave: !appState.autosave,
+      },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) =>
+    supported && appState.fileHandle ? (
+      <label style={{ display: "flex" }}>
+        <input
+          type="checkbox"
+          checked={appState.autosave}
+          onChange={(event) => updateData(event.target.checked)}
+        />{" "}
+        {t("labels.toggleAutosave")}
+        <Tooltip
+          label={t("labels.toggleAutosave_details")}
+          position="above"
+          long={true}
+        >
+          <div className="TooltipIcon">{questionCircle}</div>
+        </Tooltip>
+      </label>
+    ) : (
+      <></>
+    ),
+});

src/actions/actionFlip.ts

@@ -0,0 +1,207 @@
+import { register } from "./register";
+import { getSelectedElements } from "../scene";
+import { getElementMap, getNonDeletedElements } from "../element";
+import { mutateElement } from "../element/mutateElement";
+import { ExcalidrawElement, NonDeleted } from "../element/types";
+import { normalizeAngle, resizeSingleElement } from "../element/resizeElements";
+import { AppState } from "../types";
+import { getTransformHandles } from "../element/transformHandles";
+import { isLinearElement } from "../element/typeChecks";
+import { updateBoundElements } from "../element/binding";
+import { LinearElementEditor } from "../element/linearElementEditor";
+
+const enableActionFlipHorizontal = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) => {
+  const eligibleElements = getSelectedElements(
+    getNonDeletedElements(elements),
+    appState,
+  );
+  return eligibleElements.length === 1 && eligibleElements[0].type !== "text";
+};
+
+const enableActionFlipVertical = (
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) => {
+  const eligibleElements = getSelectedElements(
+    getNonDeletedElements(elements),
+    appState,
+  );
+  return eligibleElements.length === 1;
+};
+
+export const actionFlipHorizontal = register({
+  name: "flipHorizontal",
+  perform: (elements, appState) => {
+    return {
+      elements: flipSelectedElements(elements, appState, "horizontal"),
+      appState,
+      commitToHistory: true,
+    };
+  },
+  keyTest: (event) => event.shiftKey && event.code === "KeyH",
+  contextItemLabel: "labels.flipHorizontal",
+  contextItemPredicate: (elements, appState) =>
+    enableActionFlipHorizontal(elements, appState),
+});
+
+export const actionFlipVertical = register({
+  name: "flipVertical",
+  perform: (elements, appState) => {
+    return {
+      elements: flipSelectedElements(elements, appState, "vertical"),
+      appState,
+      commitToHistory: true,
+    };
+  },
+  keyTest: (event) => event.shiftKey && event.code === "KeyV",
+  contextItemLabel: "labels.flipVertical",
+  contextItemPredicate: (elements, appState) =>
+    enableActionFlipVertical(elements, appState),
+});
+
+const flipSelectedElements = (
+  elements: readonly ExcalidrawElement[],
+  appState: Readonly<AppState>,
+  flipDirection: "horizontal" | "vertical",
+) => {
+  const selectedElements = getSelectedElements(
+    getNonDeletedElements(elements),
+    appState,
+  );
+
+  // remove once we allow for groups of elements to be flipped
+  if (selectedElements.length > 1) {
+    return elements;
+  }
+
+  const updatedElements = flipElements(
+    selectedElements,
+    appState,
+    flipDirection,
+  );
+
+  const updatedElementsMap = getElementMap(updatedElements);
+
+  return elements.map((element) => updatedElementsMap[element.id] || element);
+};
+
+const flipElements = (
+  elements: NonDeleted<ExcalidrawElement>[],
+  appState: AppState,
+  flipDirection: "horizontal" | "vertical",
+): ExcalidrawElement[] => {
+  for (let i = 0; i < elements.length; i++) {
+    flipElement(elements[i], appState);
+    // If vertical flip, rotate an extra 180
+    if (flipDirection === "vertical") {
+      rotateElement(elements[i], Math.PI);
+    }
+  }
+  return elements;
+};
+
+const flipElement = (
+  element: NonDeleted<ExcalidrawElement>,
+  appState: AppState,
+) => {
+  const originalX = element.x;
+  const originalY = element.y;
+  const width = element.width;
+  const height = element.height;
+  const originalAngle = normalizeAngle(element.angle);
+
+  let finalOffsetX = 0;
+  if (isLinearElement(element)) {
+    finalOffsetX =
+      element.points.reduce((max, point) => Math.max(max, point[0]), 0) * 2 -
+      element.width;
+  }
+
+  // Rotate back to zero, if necessary
+  mutateElement(element, {
+    angle: normalizeAngle(0),
+  });
+  // Flip unrotated by pulling TransformHandle to opposite side
+  const transformHandles = getTransformHandles(element, appState.zoom);
+  let usingNWHandle = true;
+  let newNCoordsX = 0;
+  let nHandle = transformHandles.nw;
+  if (!nHandle) {
+    // Use ne handle instead
+    usingNWHandle = false;
+    nHandle = transformHandles.ne;
+    if (!nHandle) {
+      mutateElement(element, {
+        angle: originalAngle,
+      });
+      return;
+    }
+  }
+
+  if (isLinearElement(element)) {
+    for (let i = 1; i < element.points.length; i++) {
+      LinearElementEditor.movePoint(element, i, [
+        -element.points[i][0],
+        element.points[i][1],
+      ]);
+    }
+    LinearElementEditor.normalizePoints(element);
+  } else {
+    // calculate new x-coord for transformation
+    newNCoordsX = usingNWHandle ? element.x + 2 * width : element.x - 2 * width;
+    resizeSingleElement(
+      element,
+      true,
+      element,
+      usingNWHandle ? "nw" : "ne",
+      false,
+      newNCoordsX,
+      nHandle[1],
+    );
+    // fix the size to account for handle sizes
+    mutateElement(element, {
+      width,
+      height,
+    });
+  }
+
+  // Rotate by (360 degrees - original angle)
+  let angle = normalizeAngle(2 * Math.PI - originalAngle);
+  if (angle < 0) {
+    // check, probably unnecessary
+    angle = normalizeAngle(angle + 2 * Math.PI);
+  }
+  mutateElement(element, {
+    angle,
+  });
+
+  // Move back to original spot to appear "flipped in place"
+  mutateElement(element, {
+    x: originalX + finalOffsetX,
+    y: originalY,
+  });
+
+  updateBoundElements(element);
+};
+
+const rotateElement = (element: ExcalidrawElement, rotationAngle: number) => {
+  const originalX = element.x;
+  const originalY = element.y;
+  let angle = normalizeAngle(element.angle + rotationAngle);
+  if (angle < 0) {
+    // check, probably unnecessary
+    angle = normalizeAngle(2 * Math.PI + angle);
+  }
+  mutateElement(element, {
+    angle,
+  });
+
+  // Move back to original spot
+  mutateElement(element, {
+    x: originalX,
+    y: originalY,
+  });
+};

src/actions/index.ts

@@ -33,6 +33,7 @@ export { actionFinalize } from "./actionFinalize";
 export {
   actionChangeProjectName,
   actionChangeExportBackground,
+  actionToggleAutosave,
   actionSaveScene,
   actionSaveAsScene,
   actionLoadScene,
@@ -66,6 +67,8 @@ export {
   distributeVertically,
 } from "./actionDistribute";
 
+export { actionFlipHorizontal, actionFlipVertical } from "./actionFlip";
+
 export {
   actionCopy,
   actionCut,

src/actions/manager.tsx

@@ -7,12 +7,12 @@ import {
   ActionResult,
 } from "./types";
 import { ExcalidrawElement } from "../element/types";
-import { AppState, ExcalidrawProps } from "../types";
+import { AppProps, AppState } from "../types";
 import { MODES } from "../constants";
 
 // This is the <App> component, but for now we don't care about anything but its
 // `canvas` state.
-type App = { canvas: HTMLCanvasElement | null; props: ExcalidrawProps };
+type App = { canvas: HTMLCanvasElement | null; props: AppProps };
 
 export class ActionManager implements ActionsManagerInterface {
   actions = {} as ActionsManagerInterface["actions"];
@@ -52,10 +52,14 @@ export class ActionManager implements ActionsManagerInterface {
   }
 
   handleKeyDown(event: KeyboardEvent) {
+    const canvasActions = this.app.props.UIOptions.canvasActions;
     const data = Object.values(this.actions)
       .sort((a, b) => (b.keyPriority || 0) - (a.keyPriority || 0))
       .filter(
         (action) =>
+          (action.name in canvasActions
+            ? canvasActions[action.name as keyof typeof canvasActions]
+            : true) &&
           action.keyTest &&
           action.keyTest(
             event,
@@ -102,7 +106,15 @@ export class ActionManager implements ActionsManagerInterface {
   // like the user list. We can use this key to extract more
   // data from app state. This is an alternative to generic prop hell!
   renderAction = (name: ActionName, id?: string) => {
-    if (this.actions[name] && "PanelComponent" in this.actions[name]) {
+    const canvasActions = this.app.props.UIOptions.canvasActions;
+
+    if (
+      this.actions[name] &&
+      "PanelComponent" in this.actions[name] &&
+      (name in canvasActions
+        ? canvasActions[name as keyof typeof canvasActions]
+        : true)
+    ) {
       const action = this.actions[name];
       const PanelComponent = action.PanelComponent!;
       const updateData = (formState?: any) => {

src/actions/shortcuts.ts

@@ -23,7 +23,9 @@ export type ShortcutName =
   | "zenMode"
   | "stats"
   | "addToLibrary"
-  | "viewMode";
+  | "viewMode"
+  | "flipHorizontal"
+  | "flipVertical";
 
 const shortcutMap: Record<ShortcutName, string[]> = {
   cut: [getShortcutKey("CtrlOrCmd+X")],
@@ -57,6 +59,8 @@ const shortcutMap: Record<ShortcutName, string[]> = {
   zenMode: [getShortcutKey("Alt+Z")],
   stats: [],
   addToLibrary: [],
+  flipHorizontal: [getShortcutKey("Shift+H")],
+  flipVertical: [getShortcutKey("Shift+V")],
   viewMode: [getShortcutKey("Alt+R")],
 };
 

src/actions/types.ts

@@ -6,7 +6,10 @@ import { AppState, ExcalidrawProps } from "../types";
 export type ActionResult =
   | {
       elements?: readonly ExcalidrawElement[] | null;
-      appState?: MarkOptional<AppState, "offsetTop" | "offsetLeft"> | null;
+      appState?: MarkOptional<
+        AppState,
+        "offsetTop" | "offsetLeft" | "width" | "height"
+      > | null;
       commitToHistory: boolean;
       syncHistory?: boolean;
     }
@@ -48,6 +51,7 @@ export type ActionName =
   | "changeOpacity"
   | "changeFontSize"
   | "toggleCanvasMenu"
+  | "toggleAutosave"
   | "toggleEditMenu"
   | "undo"
   | "redo"
@@ -85,6 +89,8 @@ export type ActionName =
   | "alignHorizontallyCentered"
   | "distributeHorizontally"
   | "distributeVertically"
+  | "flipHorizontal"
+  | "flipVertical"
   | "viewMode"
   | "exportWithDarkMode";
 

src/appState.ts

@@ -10,9 +10,10 @@ import { getDateTime } from "./utils";
 
 export const getDefaultAppState = (): Omit<
   AppState,
-  "offsetTop" | "offsetLeft"
+  "offsetTop" | "offsetLeft" | "width" | "height"
 > => {
   return {
+    autosave: false,
     theme: "light",
     collaborators: new Map(),
     currentChartType: "bar",
@@ -43,7 +44,6 @@ export const getDefaultAppState = (): Omit<
     exportWithDarkMode: false,
     fileHandle: null,
     gridSize: null,
-    height: window.innerHeight,
     isBindingEnabled: true,
     isLibraryOpen: false,
     isLoading: false,
@@ -70,7 +70,6 @@ export const getDefaultAppState = (): Omit<
     suggestedBindings: [],
     toastMessage: null,
     viewBackgroundColor: oc.white,
-    width: window.innerWidth,
     zenModeEnabled: false,
     zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
     viewModeEnabled: false,
@@ -92,6 +91,7 @@ const APP_STATE_STORAGE_CONF = (<
 >(
   config: { [K in keyof T]: K extends keyof AppState ? T[K] : never },
 ) => config)({
+  autosave: { browser: true, export: false },
   theme: { browser: true, export: false },
   collaborators: { browser: false, export: false },
   currentChartType: { browser: true, export: false },

src/components/Actions.tsx

@@ -3,7 +3,7 @@ import { ActionManager } from "../actions/manager";
 import { getNonDeletedElements } from "../element";
 import { ExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import {
   canChangeSharpness,
   canHaveArrowheads,

src/components/App.tsx

@@ -17,6 +17,8 @@ import {
   actionDeleteSelected,
   actionDuplicateSelection,
   actionFinalize,
+  actionFlipHorizontal,
+  actionFlipVertical,
   actionGroup,
   actionPasteStyles,
   actionSelectAll,
@@ -42,6 +44,7 @@ import {
 import {
   APP_NAME,
   CURSOR_TYPE,
+  DEFAULT_UI_OPTIONS,
   DEFAULT_VERTICAL_ALIGN,
   DRAGGING_THRESHOLD,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
@@ -53,13 +56,16 @@ import {
   MIME_TYPES,
   POINTER_BUTTON,
   SCROLL_TIMEOUT,
+  AUTO_SAVE_TIMEOUT,
   TAP_TWICE_TIMEOUT,
   TEXT_TO_CENTER_SNAP_THRESHOLD,
   TOUCH_CTX_MENU_TIMEOUT,
+  URL_HASH_KEYS,
+  URL_QUERY_KEYS,
   ZOOM_STEP,
 } from "../constants";
 import { loadFromBlob } from "../data";
-import { isValidLibrary } from "../data/json";
+import { saveAsJSON, isValidLibrary } from "../data/json";
 import { Library } from "../data/library";
 import { restore } from "../data/restore";
 import {
@@ -156,13 +162,7 @@ import Scene from "../scene/Scene";
 import { SceneState, ScrollBars } from "../scene/types";
 import { getNewZoom } from "../scene/zoom";
 import { findShapeByKey } from "../shapes";
-import {
-  AppState,
-  ExcalidrawProps,
-  Gesture,
-  GestureEvent,
-  SceneData,
-} from "../types";
+import { AppProps, AppState, Gesture, GestureEvent, SceneData } from "../types";
 import {
   debounce,
   distance,
@@ -275,30 +275,31 @@ export type ExcalidrawImperativeAPI = {
   setScrollToContent: InstanceType<typeof App>["setScrollToContent"];
   getSceneElements: InstanceType<typeof App>["getSceneElements"];
   getAppState: () => InstanceType<typeof App>["state"];
-  setCanvasOffsets: InstanceType<typeof App>["setCanvasOffsets"];
+  refresh: InstanceType<typeof App>["refresh"];
+  importLibrary: InstanceType<typeof App>["importLibraryFromUrl"];
+  setToastMessage: InstanceType<typeof App>["setToastMessage"];
   readyPromise: ResolvablePromise<ExcalidrawImperativeAPI>;
   ready: true;
 };
 
-class App extends React.Component<ExcalidrawProps, AppState> {
+class App extends React.Component<AppProps, AppState> {
   canvas: HTMLCanvasElement | null = null;
   rc: RoughCanvas | null = null;
   unmounted: boolean = false;
   actionManager: ActionManager;
   private excalidrawContainerRef = React.createRef<HTMLDivElement>();
 
-  public static defaultProps: Partial<ExcalidrawProps> = {
-    width: window.innerWidth,
-    height: window.innerHeight,
+  public static defaultProps: Partial<AppProps> = {
+    // needed for tests to pass since we directly render App in many tests
+    UIOptions: DEFAULT_UI_OPTIONS,
   };
+
   private scene: Scene;
-  constructor(props: ExcalidrawProps) {
+  private resizeObserver: ResizeObserver | undefined;
+  constructor(props: AppProps) {
     super(props);
     const defaultAppState = getDefaultAppState();
-
     const {
-      width = window.innerWidth,
-      height = window.innerHeight,
       excalidrawRef,
       viewModeEnabled = false,
       zenModeEnabled = false,
@@ -310,13 +311,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       ...defaultAppState,
       theme,
       isLoading: true,
-      width,
-      height,
       ...this.getCanvasOffsets(),
       viewModeEnabled,
       zenModeEnabled,
       gridSize: gridModeEnabled ? GRID_SIZE : null,
       name,
+      width: window.innerWidth,
+      height: window.innerHeight,
     };
     if (excalidrawRef) {
       const readyPromise =
@@ -335,7 +336,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         setScrollToContent: this.setScrollToContent,
         getSceneElements: this.getSceneElements,
         getAppState: () => this.state,
-        setCanvasOffsets: this.setCanvasOffsets,
+        refresh: this.refresh,
+        importLibrary: this.importLibraryFromUrl,
+        setToastMessage: this.setToastMessage,
       } as const;
       if (typeof excalidrawRef === "function") {
         excalidrawRef(api);
@@ -407,7 +410,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         onPointerUp={this.removePointer}
         onPointerCancel={this.removePointer}
         onTouchMove={this.handleTouchMove}
-        onDrop={this.handleCanvasOnDrop}
       >
         {t("labels.drawingCanvas")}
       </canvas>
@@ -422,7 +424,12 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       viewModeEnabled,
     } = this.state;
 
-    const { onCollabButtonClick, onExportToBackend, renderFooter } = this.props;
+    const {
+      onCollabButtonClick,
+      onExportToBackend,
+      renderFooter,
+      renderCustomStats,
+    } = this.props;
 
     const DEFAULT_PASTE_X = canvasDOMWidth / 2;
     const DEFAULT_PASTE_Y = canvasDOMHeight / 2;
@@ -433,10 +440,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           "excalidraw--view-mode": viewModeEnabled,
         })}
         ref={this.excalidrawContainerRef}
-        style={{
-          width: canvasDOMWidth,
-          height: canvasDOMHeight,
-        }}
+        onDrop={this.handleAppOnDrop}
       >
         <LayerUI
           canvas={this.canvas}
@@ -463,16 +467,22 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           showExitZenModeBtn={
             typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled
           }
-          showThemeBtn={typeof this.props?.theme === "undefined"}
+          showThemeBtn={
+            typeof this.props?.theme === "undefined" &&
+            this.props.UIOptions.canvasActions.theme
+          }
           libraryReturnUrl={this.props.libraryReturnUrl}
+          UIOptions={this.props.UIOptions}
         />
         <div className="excalidraw-textEditorContainer" />
+        <div className="excalidraw-contextMenuContainer" />
         {this.state.showStats && (
           <Stats
             appState={this.state}
             setAppState={this.setAppState}
             elements={this.scene.getElements()}
             onClose={this.toggleStats}
+            renderCustomStats={renderCustomStats}
           />
         )}
         {this.state.toastMessage !== null && (
@@ -546,7 +556,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         if (typeof this.props.name !== "undefined") {
           name = this.props.name;
         }
-
         this.setState(
           (state) => {
             // using Object.assign instead of spread to fool TS 4.2.2+ into
@@ -555,10 +564,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             return Object.assign(actionResult.appState || {}, {
               editingElement:
                 editingElement || actionResult.appState?.editingElement || null,
-              width: state.width,
-              height: state.height,
-              offsetTop: state.offsetTop,
-              offsetLeft: state.offsetLeft,
               viewModeEnabled,
               zenModeEnabled,
               gridSize,
@@ -603,8 +608,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.onSceneUpdated();
   };
 
-  private importLibraryFromUrl = async (url: string) => {
-    window.history.replaceState({}, APP_NAME, window.location.origin);
+  private importLibraryFromUrl = async (url: string, token?: string | null) => {
+    if (window.location.hash.includes(URL_HASH_KEYS.addLibrary)) {
+      const hash = new URLSearchParams(window.location.hash.slice(1));
+      hash.delete(URL_HASH_KEYS.addLibrary);
+      window.history.replaceState({}, APP_NAME, `#${hash.toString()}`);
+    } else if (window.location.search.includes(URL_QUERY_KEYS.addLibrary)) {
+      const query = new URLSearchParams(window.location.search);
+      query.delete(URL_QUERY_KEYS.addLibrary);
+      window.history.replaceState({}, APP_NAME, `?${query.toString()}`);
+    }
+
     try {
       const request = await fetch(decodeURIComponent(url));
       const blob = await request.blob();
@@ -613,14 +627,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         throw new Error();
       }
       if (
+        token === Library.csrfToken ||
         window.confirm(
           t("alerts.confirmAddLibrary", { numShapes: json.library.length }),
         )
       ) {
         await Library.importLibrary(blob);
-        this.setState({
-          isLibraryOpen: true,
-        });
+        // hack to rerender the library items after import
+        if (this.state.isLibraryOpen) {
+          this.setState({ isLibraryOpen: false });
+        }
+        this.setState({ isLibraryOpen: true });
       }
     } catch (error) {
       window.alert(t("alerts.errorLoadingLibrary"));
@@ -679,7 +696,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     if (!this.state.isLoading) {
       this.setState({ isLoading: true });
     }
-
     let initialData = null;
     try {
       initialData = (await this.props.initialData) || null;
@@ -688,7 +704,6 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     }
 
     const scene = restore(initialData, null);
-
     scene.appState = {
       ...scene.appState,
       isLoading: false,
@@ -716,12 +731,18 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       commitToHistory: true,
     });
 
-    const addToLibraryUrl = new URLSearchParams(window.location.search).get(
-      "addLibrary",
-    );
+    const libraryUrl =
+      // current
+      new URLSearchParams(window.location.hash.slice(1)).get(
+        URL_HASH_KEYS.addLibrary,
+      ) ||
+      // legacy, kept for compat reasons
+      new URLSearchParams(window.location.search).get(
+        URL_QUERY_KEYS.addLibrary,
+      );
 
-    if (addToLibraryUrl) {
-      await this.importLibraryFromUrl(addToLibraryUrl);
+    if (libraryUrl) {
+      await this.importLibraryFromUrl(libraryUrl);
     }
   };
 
@@ -754,19 +775,24 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.scene.addCallback(this.onSceneUpdated);
     this.addEventListeners();
 
+    if ("ResizeObserver" in window && this.excalidrawContainerRef?.current) {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateDOMRect();
+      });
+      this.resizeObserver?.observe(this.excalidrawContainerRef.current);
+    }
     const searchParams = new URLSearchParams(window.location.search.slice(1));
 
     if (searchParams.has("web-share-target")) {
       // Obtain a file that was shared via the Web Share Target API.
       this.restoreFileFromShare();
     } else {
-      this.setState(this.getCanvasOffsets(), () => {
-        this.initializeScene();
-      });
+      this.updateDOMRect(this.initializeScene);
     }
   }
 
   public componentWillUnmount() {
+    this.resizeObserver?.disconnect();
     this.unmounted = true;
     this.removeEventListeners();
     this.scene.destroy();
@@ -858,22 +884,11 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     window.addEventListener(EVENT.DROP, this.disableEvent, false);
   }
 
-  componentDidUpdate(prevProps: ExcalidrawProps, prevState: AppState) {
+  componentDidUpdate(prevProps: AppProps, prevState: AppState) {
     if (prevProps.langCode !== this.props.langCode) {
       this.updateLanguage();
     }
 
-    if (
-      prevProps.width !== this.props.width ||
-      prevProps.height !== this.props.height
-    ) {
-      this.setState({
-        width: this.props.width ?? window.innerWidth,
-        height: this.props.height ?? window.innerHeight,
-        ...this.getCanvasOffsets(),
-      });
-    }
-
     if (prevProps.viewModeEnabled !== this.props.viewModeEnabled) {
       this.setState(
         { viewModeEnabled: !!this.props.viewModeEnabled },
@@ -909,6 +924,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       .querySelector(".excalidraw")
       ?.classList.toggle("theme--dark", this.state.theme === "dark");
 
+    if (this.state.autosave && this.state.fileHandle && supported) {
+      this.autosaveLocalSceneDebounced(
+        this.scene.getElementsIncludingDeleted(),
+        this.state,
+      );
+    }
+
     if (
       this.state.editingLinearElement &&
       !this.state.selectedElementIds[this.state.editingLinearElement.elementId]
@@ -1041,6 +1063,37 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     });
   }, SCROLL_TIMEOUT);
 
+  private autosaveLocalSceneDebounced = debounce(
+    async (elements: readonly ExcalidrawElement[], state: AppState) => {
+      if (this.state.autosave && this.state.fileHandle && supported) {
+        try {
+          await saveAsJSON(
+            elements,
+            state,
+            // only if fileHandle valid
+            true,
+          );
+        } catch (error) {
+          this.setState({
+            autosave: false,
+            toastMessage:
+              error.name === "NotAllowedError"
+                ? t("toast.autosaveFailed_notAllowed")
+                : error.name === "NotFoundError"
+                ? t("toast.autosaveFailed_notFound")
+                : t("toast.autosaveFailed"),
+          });
+
+          // shouldn't happen, so let's log it
+          if (!["NotAllowedError", "NotFoundError"].includes(error.name)) {
+            console.error(error);
+          }
+        }
+      }
+    },
+    AUTO_SAVE_TIMEOUT,
+  );
+
   // Copy/paste
 
   private onCut = withBatchedUpdates((event: ClipboardEvent) => {
@@ -1308,6 +1361,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     this.setState({ toastMessage: null });
   };
 
+  setToastMessage = (toastMessage: string) => {
+    this.setState({ toastMessage });
+  };
+
   restoreFileFromShare = async () => {
     try {
       const webShareTargetCache = await caches.open("web-share-target");
@@ -1881,8 +1938,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     }
 
     resetCursor(this.canvas);
-
-    if (!event[KEYS.CTRL_OR_CMD]) {
+    if (!event[KEYS.CTRL_OR_CMD] && !this.state.viewModeEnabled) {
       this.startTextEditing({
         sceneX,
         sceneY,
@@ -2256,10 +2312,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         touchTimeout = window.setTimeout(() => {
           touchTimeout = 0;
           if (!invalidateContextMenu) {
-            this.openContextMenu({
-              clientX: event.clientX,
-              clientY: event.clientY,
-            });
+            this.handleCanvasContextMenu(event);
           }
         }, TOUCH_CTX_MENU_TIMEOUT);
       }
@@ -3570,9 +3623,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     }
   };
 
-  private handleCanvasOnDrop = async (
-    event: React.DragEvent<HTMLCanvasElement>,
-  ) => {
+  private handleAppOnDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     try {
       const file = event.dataTransfer.files[0];
       if (file?.type === "image/png" || file?.type === "image/svg+xml") {
@@ -3606,9 +3657,20 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     const file = event.dataTransfer?.files[0];
     if (
-      file?.type === "application/json" ||
-      file?.name.endsWith(".excalidraw")
+      file?.type === MIME_TYPES.excalidrawlib ||
+      file?.name?.endsWith(".excalidrawlib")
     ) {
+      Library.importLibrary(file)
+        .then(() => {
+          // Close and then open to get the libraries updated
+          this.setState({ isLibraryOpen: false });
+          this.setState({ isLibraryOpen: true });
+        })
+        .catch((error) =>
+          this.setState({ isLoading: false, errorMessage: error.message }),
+        );
+      // default: assume an Excalidraw file regardless of extension/MimeType
+    } else {
       this.setState({ isLoading: true });
       if (supported) {
         try {
@@ -3620,23 +3682,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           console.warn(error.name, error.message);
         }
       }
-      this.loadFileToCanvas(file);
-    } else if (
-      file?.type === MIME_TYPES.excalidrawlib ||
-      file?.name.endsWith(".excalidrawlib")
-    ) {
-      Library.importLibrary(file)
-        .then(() => {
-          this.setState({ isLibraryOpen: false });
-        })
-        .catch((error) =>
-          this.setState({ isLoading: false, errorMessage: error.message }),
-        );
-    } else {
-      this.setState({
-        isLoading: false,
-        errorMessage: t("alerts.couldNotLoadInvalidFile"),
-      });
+      await this.loadFileToCanvas(file);
     }
   };
 
@@ -3661,7 +3707,27 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {
     event.preventDefault();
-    this.openContextMenu(event);
+
+    const { x, y } = viewportCoordsToSceneCoords(event, this.state);
+    const element = this.getElementAtPosition(x, y);
+
+    const type = element ? "element" : "canvas";
+
+    const container = this.excalidrawContainerRef.current!;
+    const {
+      top: offsetTop,
+      left: offsetLeft,
+    } = container.getBoundingClientRect();
+    const left = event.clientX - offsetLeft;
+    const top = event.clientY - offsetTop;
+
+    if (element && !this.state.selectedElementIds[element.id]) {
+      this.setState({ selectedElementIds: { [element.id]: true } }, () => {
+        this._openContextMenu({ top, left }, type);
+      });
+    } else {
+      this._openContextMenu({ top, left }, type);
+    }
   };
 
   private maybeDragNewGenericElement = (
@@ -3751,18 +3817,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     return false;
   };
 
-  private openContextMenu = ({
-    clientX,
-    clientY,
-  }: {
-    clientX: number;
-    clientY: number;
-  }) => {
-    const { x, y } = viewportCoordsToSceneCoords(
-      { clientX, clientY },
-      this.state,
-    );
-
+  /** @private use this.handleCanvasContextMenu */
+  private _openContextMenu = (
+    {
+      left,
+      top,
+    }: {
+      left: number;
+      top: number;
+    },
+    type: "canvas" | "element",
+  ) => {
     const maybeGroupAction = actionGroup.contextItemPredicate!(
       this.actionManager.getElementsIncludingDeleted(),
       this.actionManager.getAppState(),
@@ -3773,12 +3838,22 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       this.actionManager.getAppState(),
     );
 
+    const maybeFlipHorizontal = actionFlipHorizontal.contextItemPredicate!(
+      this.actionManager.getElementsIncludingDeleted(),
+      this.actionManager.getAppState(),
+    );
+
+    const maybeFlipVertical = actionFlipVertical.contextItemPredicate!(
+      this.actionManager.getElementsIncludingDeleted(),
+      this.actionManager.getAppState(),
+    );
+
     const separator = "separator";
 
     const _isMobile = isMobile();
 
     const elements = this.scene.getElements();
-    const element = this.getElementAtPosition(x, y);
+
     const options: ContextMenuOption[] = [];
     if (probablySupportsClipboardBlob && elements.length > 0) {
       options.push(actionCopyAsPng);
@@ -3787,7 +3862,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     if (probablySupportsClipboardWriteText && elements.length > 0) {
       options.push(actionCopyAsSvg);
     }
-    if (!element) {
+    if (type === "canvas") {
       const viewModeOptions = [
         ...options,
         typeof this.props.gridModeEnabled === "undefined" &&
@@ -3800,10 +3875,11 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
       ContextMenu.push({
         options: viewModeOptions,
-        top: clientY,
-        left: clientX,
+        top,
+        left,
         actionManager: this.actionManager,
         appState: this.state,
+        container: this.excalidrawContainerRef.current!,
       });
 
       if (this.state.viewModeEnabled) {
@@ -3843,25 +3919,23 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             actionToggleViewMode,
           actionToggleStats,
         ],
-        top: clientY,
-        left: clientX,
+        top,
+        left,
         actionManager: this.actionManager,
         appState: this.state,
+        container: this.excalidrawContainerRef.current!,
       });
       return;
     }
 
-    if (!this.state.selectedElementIds[element.id]) {
-      this.setState({ selectedElementIds: { [element.id]: true } });
-    }
-
     if (this.state.viewModeEnabled) {
       ContextMenu.push({
         options: [navigator.clipboard && actionCopy, ...options],
-        top: clientY,
-        left: clientX,
+        top,
+        left,
         actionManager: this.actionManager,
         appState: this.state,
+        container: this.excalidrawContainerRef.current!,
       });
       return;
     }
@@ -3897,13 +3971,17 @@ class App extends React.Component<ExcalidrawProps, AppState> {
         actionSendToBack,
         actionBringToFront,
         separator,
+        maybeFlipHorizontal && actionFlipHorizontal,
+        maybeFlipVertical && actionFlipVertical,
+        (maybeFlipHorizontal || maybeFlipVertical) && separator,
         actionDuplicateSelection,
         actionDeleteSelected,
       ],
-      top: clientY,
-      left: clientX,
+      top,
+      left,
       actionManager: this.actionManager,
       appState: this.state,
+      container: this.excalidrawContainerRef.current!,
     });
   };
 
@@ -4037,14 +4115,56 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     }
   }, 300);
 
-  public setCanvasOffsets = () => {
+  private updateDOMRect = (cb?: () => void) => {
+    if (this.excalidrawContainerRef?.current) {
+      const excalidrawContainer = this.excalidrawContainerRef.current;
+      const {
+        width,
+        height,
+        left: offsetLeft,
+        top: offsetTop,
+      } = excalidrawContainer.getBoundingClientRect();
+      const {
+        width: currentWidth,
+        height: currentHeight,
+        offsetTop: currentOffsetTop,
+        offsetLeft: currentOffsetLeft,
+      } = this.state;
+
+      if (
+        width === currentWidth &&
+        height === currentHeight &&
+        offsetLeft === currentOffsetLeft &&
+        offsetTop === currentOffsetTop
+      ) {
+        if (cb) {
+          cb();
+        }
+        return;
+      }
+
+      this.setState(
+        {
+          width,
+          height,
+          offsetLeft,
+          offsetTop,
+        },
+        () => {
+          cb && cb();
+        },
+      );
+    }
+  };
+
+  public refresh = () => {
     this.setState({ ...this.getCanvasOffsets() });
   };
 
   private getCanvasOffsets(): Pick<AppState, "offsetTop" | "offsetLeft"> {
-    if (this.excalidrawContainerRef?.current?.parentElement) {
-      const parentElement = this.excalidrawContainerRef.current.parentElement;
-      const { left, top } = parentElement.getBoundingClientRect();
+    if (this.excalidrawContainerRef?.current) {
+      const excalidrawContainer = this.excalidrawContainerRef.current;
+      const { left, top } = excalidrawContainer.getBoundingClientRect();
       return {
         offsetLeft: left,
         offsetTop: top,
@@ -4078,9 +4198,6 @@ declare global {
       history: SceneHistory;
       app: InstanceType<typeof App>;
       library: typeof Library;
-      collab: InstanceType<
-        typeof import("../excalidraw-app/collab/CollabWrapper").default
-      >;
     };
   }
 }

src/components/ButtonIconCycle.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import clsx from "clsx";
 
 export const ButtonIconCycle = <T extends any>({
@@ -14,11 +13,11 @@ export const ButtonIconCycle = <T extends any>({
 }) => {
   const current = options.find((op) => op.value === value);
 
-  function cycle() {
+  const cycle = () => {
     const index = options.indexOf(current!);
     const next = (index + 1) % options.length;
     onChange(options[next].value);
-  }
+  };
 
   return (
     <label key={group} className={clsx({ active: current!.value !== null })}>

src/components/CollabButton.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import clsx from "clsx";
 import { ToolButton } from "./ToolButton";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { users } from "./icons";
 
 import "./CollabButton.scss";

src/components/ContextMenu.tsx

@@ -32,67 +32,63 @@ const ContextMenu = ({
   actionManager,
   appState,
 }: ContextMenuProps) => {
-  const isDarkTheme = !!document
-    .querySelector(".excalidraw")
-    ?.classList.contains("theme--dark");
   return (
-    <div
-      className={clsx("excalidraw", {
-        "theme--dark theme--dark-background-none": isDarkTheme,
-      })}
+    <Popover
+      onCloseRequest={onCloseRequest}
+      top={top}
+      left={left}
+      fitInViewport={true}
     >
-      <Popover
-        onCloseRequest={onCloseRequest}
-        top={top}
-        left={left}
-        fitInViewport={true}
+      <ul
+        className="context-menu"
+        onContextMenu={(event) => event.preventDefault()}
       >
-        <ul
-          className="context-menu"
-          onContextMenu={(event) => event.preventDefault()}
-        >
-          {options.map((option, idx) => {
-            if (option === "separator") {
-              return <hr key={idx} className="context-menu-option-separator" />;
-            }
+        {options.map((option, idx) => {
+          if (option === "separator") {
+            return <hr key={idx} className="context-menu-option-separator" />;
+          }
 
-            const actionName = option.name;
-            const label = option.contextItemLabel
-              ? t(option.contextItemLabel)
-              : "";
-            return (
-              <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
-                <button
-                  className={clsx("context-menu-option", {
-                    dangerous: actionName === "deleteSelectedElements",
-                    checkmark: option.checked?.(appState),
-                  })}
-                  onClick={() => actionManager.executeAction(option)}
-                >
-                  <div className="context-menu-option__label">{label}</div>
-                  <kbd className="context-menu-option__shortcut">
-                    {actionName
-                      ? getShortcutFromShortcutName(actionName as ShortcutName)
-                      : ""}
-                  </kbd>
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      </Popover>
-    </div>
+          const actionName = option.name;
+          const label = option.contextItemLabel
+            ? t(option.contextItemLabel)
+            : "";
+          return (
+            <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
+              <button
+                className={clsx("context-menu-option", {
+                  dangerous: actionName === "deleteSelectedElements",
+                  checkmark: option.checked?.(appState),
+                })}
+                onClick={() => actionManager.executeAction(option)}
+              >
+                <div className="context-menu-option__label">{label}</div>
+                <kbd className="context-menu-option__shortcut">
+                  {actionName
+                    ? getShortcutFromShortcutName(actionName as ShortcutName)
+                    : ""}
+                </kbd>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </Popover>
   );
 };
 
-let contextMenuNode: HTMLDivElement;
-const getContextMenuNode = (): HTMLDivElement => {
+const contextMenuNodeByContainer = new WeakMap<HTMLElement, HTMLDivElement>();
+
+const getContextMenuNode = (container: HTMLElement): HTMLDivElement => {
+  let contextMenuNode = contextMenuNodeByContainer.get(container);
   if (contextMenuNode) {
     return contextMenuNode;
   }
-  const div = document.createElement("div");
-  document.body.appendChild(div);
-  return (contextMenuNode = div);
+  contextMenuNode = document.createElement("div");
+  container
+    .querySelector(".excalidraw-contextMenuContainer")!
+    .appendChild(contextMenuNode);
+  contextMenuNodeByContainer.set(container, contextMenuNode);
+  return contextMenuNode;
 };
 
 type ContextMenuParams = {
@@ -101,10 +97,16 @@ type ContextMenuParams = {
   left: ContextMenuProps["left"];
   actionManager: ContextMenuProps["actionManager"];
   appState: Readonly<AppState>;
+  container: HTMLElement;
 };
 
-const handleClose = () => {
-  unmountComponentAtNode(getContextMenuNode());
+const handleClose = (container: HTMLElement) => {
+  const contextMenuNode = contextMenuNodeByContainer.get(container);
+  if (contextMenuNode) {
+    unmountComponentAtNode(contextMenuNode);
+    contextMenuNode.remove();
+    contextMenuNodeByContainer.delete(container);
+  }
 };
 
 export default {
@@ -121,11 +123,11 @@ export default {
           top={params.top}
           left={params.left}
           options={options}
-          onCloseRequest={handleClose}
+          onCloseRequest={() => handleClose(params.container)}
           actionManager={params.actionManager}
           appState={params.appState}
         />,
-        getContextMenuNode(),
+        getContextMenuNode(params.container),
       );
     }
   },

src/components/Dialog.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import React, { useEffect } from "react";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { KEYS } from "../keys";
 import "./Dialog.scss";
 import { back, close } from "./icons";

src/components/ErrorDialog.tsx

@@ -28,14 +28,7 @@ export const ErrorDialog = ({
           onCloseRequest={handleClose}
           title={t("errorDialog.title")}
         >
-          <div>
-            {message.split("\n").map((line) => (
-              <>
-                {line}
-                <br />
-              </>
-            ))}
-          </div>
+          <div style={{ whiteSpace: "pre-wrap" }}>{message}</div>
         </Dialog>
       )}
     </>

src/components/ExportDialog.tsx

@@ -6,7 +6,7 @@ import { canvasToBlob } from "../data/blob";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas, getExportSize } from "../scene/export";
 import { AppState } from "../types";
@@ -202,6 +202,7 @@ const ExportModal = ({
             })}
           </Stack.Row>
         </div>
+        {actionManager.renderAction("toggleAutosave")}
         {actionManager.renderAction("changeExportBackground")}
         {someElementIsSelected && (
           <div>

src/components/HelpDialog.tsx

@@ -349,6 +349,14 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   label={t("labels.ungroup")}
                   shortcuts={[getShortcutKey("CtrlOrCmd+Shift+G")]}
                 />
+                <Shortcut
+                  label={t("labels.flipHorizontal")}
+                  shortcuts={[getShortcutKey("Shift+H")]}
+                />
+                <Shortcut
+                  label={t("labels.flipVertical")}
+                  shortcuts={[getShortcutKey("Shift+V")]}
+                />
               </ShortcutIsland>
             </Column>
           </Columns>

src/components/LayerUI.tsx

@@ -14,10 +14,16 @@ import { Library } from "../data/library";
 import { isTextElement, showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { Language, t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { ExportType } from "../scene/types";
-import { AppState, ExcalidrawProps, LibraryItem, LibraryItems } from "../types";
+import {
+  AppProps,
+  AppState,
+  ExcalidrawProps,
+  LibraryItem,
+  LibraryItems,
+} from "../types";
 import { muteFSAbortError } from "../utils";
 import { SelectedShapeActions, ShapesSwitcher, ZoomActions } from "./Actions";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
@@ -65,6 +71,7 @@ interface LayerUIProps {
   renderCustomFooter?: (isMobile: boolean) => JSX.Element;
   viewModeEnabled: boolean;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
+  UIOptions: AppProps["UIOptions"];
 }
 
 const useOnClickOutside = (
@@ -121,10 +128,11 @@ const LibraryMenuItems = ({
   const rows = [];
   let addedPendingElements = false;
 
-  const referrer = libraryReturnUrl || window.location.origin;
+  const referrer =
+    libraryReturnUrl || window.location.origin + window.location.pathname;
 
   rows.push(
-    <div className="layer-ui__library-header">
+    <div className="layer-ui__library-header" key="library-header">
       <ToolButton
         key="import"
         type="button"
@@ -134,9 +142,9 @@ const LibraryMenuItems = ({
         onClick={() => {
           importLibraryFromJSON()
             .then(() => {
-              // Maybe we should close and open the menu so that the items get updated.
-              // But for now we just close the menu.
+              // Close and then open to get the libraries updated
               setAppState({ isLibraryOpen: false });
+              setAppState({ isLibraryOpen: true });
             })
             .catch(muteFSAbortError)
             .catch((error) => {
@@ -178,7 +186,7 @@ const LibraryMenuItems = ({
       <a
         href={`https://libraries.excalidraw.com?target=${
           window.name || "_blank"
-        }&referrer=${referrer}`}
+        }&referrer=${referrer}&useHash=true&token=${Library.csrfToken}`}
         target="_excalidraw_libraries"
       >
         {t("labels.libraries")}
@@ -338,6 +346,7 @@ const LayerUI = ({
   renderCustomFooter,
   viewModeEnabled,
   libraryReturnUrl,
+  UIOptions,
 }: LayerUIProps) => {
   const isMobile = useIsMobile();
 
@@ -349,6 +358,7 @@ const LayerUI = ({
       href="https://blog.excalidraw.com/end-to-end-encryption/"
       target="_blank"
       rel="noopener noreferrer"
+      aria-label={t("encrypted.link")}
     >
       <Tooltip label={t("encrypted.tooltip")} position="above" long={true}>
         {shield}
@@ -357,6 +367,10 @@ const LayerUI = ({
   );
 
   const renderExportDialog = () => {
+    if (!UIOptions.canvasActions.export) {
+      return null;
+    }
+
     const createExporter = (type: ExportType): ExportCB => async (
       exportedElements,
       scale,

src/components/LibraryUnit.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { close } from "../components/icons";
 import { MIME_TYPES } from "../constants";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { exportToSvg } from "../scene/export";
 import { LibraryItem } from "../types";
 import "./LibraryUnit.scss";

src/components/Popover.scss

@@ -1,6 +1,6 @@
 .excalidraw {
   .popover {
-    position: fixed;
+    position: absolute;
     z-index: 10;
   }
 }

src/components/Stats.tsx

@@ -1,49 +1,22 @@
-import React, { useEffect, useState } from "react";
-import { copyTextToSystemClipboard } from "../clipboard";
-import { DEFAULT_VERSION } from "../constants";
+import React from "react";
 import { getCommonBounds } from "../element/bounds";
 import { NonDeletedExcalidrawElement } from "../element/types";
-import {
-  getElementsStorageSize,
-  getTotalStorageSize,
-} from "../excalidraw-app/data/localStorage";
 import { t } from "../i18n";
-import useIsMobile from "../is-mobile";
+import { useIsMobile } from "../is-mobile";
 import { getTargetElements } from "../scene";
-import { AppState } from "../types";
-import { debounce, getVersion, nFormatter } from "../utils";
+import { AppState, ExcalidrawProps } from "../types";
 import { close } from "./icons";
 import { Island } from "./Island";
 import "./Stats.scss";
 
-type StorageSizes = { scene: number; total: number };
-
-const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
-  cb({
-    scene: getElementsStorageSize(),
-    total: getTotalStorageSize(),
-  });
-}, 500);
-
 export const Stats = (props: {
   appState: AppState;
   setAppState: React.Component<any, AppState>["setState"];
   elements: readonly NonDeletedExcalidrawElement[];
   onClose: () => void;
+  renderCustomStats: ExcalidrawProps["renderCustomStats"];
 }) => {
   const isMobile = useIsMobile();
-  const [storageSizes, setStorageSizes] = useState<StorageSizes>({
-    scene: 0,
-    total: 0,
-  });
-
-  useEffect(() => {
-    getStorageSizes((sizes) => {
-      setStorageSizes(sizes);
-    });
-  });
-
-  useEffect(() => () => getStorageSizes.cancel(), []);
 
   const boundingBox = getCommonBounds(props.elements);
   const selectedElements = getTargetElements(props.elements, props.appState);
@@ -53,17 +26,6 @@ export const Stats = (props: {
     return null;
   }
 
-  const version = getVersion();
-  let hash;
-  let timestamp;
-
-  if (version !== DEFAULT_VERSION) {
-    timestamp = version.slice(0, 16).replace("T", " ");
-    hash = version.slice(21);
-  } else {
-    timestamp = t("stats.versionNotAvailable");
-  }
-
   return (
     <div className="Stats">
       <Island padding={2}>
@@ -88,17 +50,7 @@ export const Stats = (props: {
               <td>{t("stats.height")}</td>
               <td>{Math.round(boundingBox[3]) - Math.round(boundingBox[1])}</td>
             </tr>
-            <tr>
-              <th colSpan={2}>{t("stats.storage")}</th>
-            </tr>
-            <tr>
-              <td>{t("stats.scene")}</td>
-              <td>{nFormatter(storageSizes.scene, 1)}</td>
-            </tr>
-            <tr>
-              <td>{t("stats.total")}</td>
-              <td>{nFormatter(storageSizes.total, 1)}</td>
-            </tr>
+
             {selectedElements.length === 1 && (
               <tr>
                 <th colSpan={2}>{t("stats.element")}</th>
@@ -120,31 +72,17 @@ export const Stats = (props: {
               <>
                 <tr>
                   <td>{"x"}</td>
-                  <td>
-                    {Math.round(
-                      selectedElements.length === 1
-                        ? selectedElements[0].x
-                        : selectedBoundingBox[0],
-                    )}
-                  </td>
+                  <td>{Math.round(selectedBoundingBox[0])}</td>
                 </tr>
                 <tr>
                   <td>{"y"}</td>
-                  <td>
-                    {Math.round(
-                      selectedElements.length === 1
-                        ? selectedElements[0].y
-                        : selectedBoundingBox[1],
-                    )}
-                  </td>
+                  <td>{Math.round(selectedBoundingBox[1])}</td>
                 </tr>
                 <tr>
                   <td>{t("stats.width")}</td>
                   <td>
                     {Math.round(
-                      selectedElements.length === 1
-                        ? selectedElements[0].width
-                        : selectedBoundingBox[2] - selectedBoundingBox[0],
+                      selectedBoundingBox[2] - selectedBoundingBox[0],
                     )}
                   </td>
                 </tr>
@@ -152,9 +90,7 @@ export const Stats = (props: {
                   <td>{t("stats.height")}</td>
                   <td>
                     {Math.round(
-                      selectedElements.length === 1
-                        ? selectedElements[0].height
-                        : selectedBoundingBox[3] - selectedBoundingBox[1],
+                      selectedBoundingBox[3] - selectedBoundingBox[1],
                     )}
                   </td>
                 </tr>
@@ -170,28 +106,7 @@ export const Stats = (props: {
                 </td>
               </tr>
             )}
-            <tr>
-              <th colSpan={2}>{t("stats.version")}</th>
-            </tr>
-            <tr>
-              <td
-                colSpan={2}
-                style={{ textAlign: "center", cursor: "pointer" }}
-                onClick={async () => {
-                  try {
-                    await copyTextToSystemClipboard(getVersion());
-                    props.setAppState({
-                      toastMessage: t("toast.copyToClipboard"),
-                    });
-                  } catch {}
-                }}
-                title={t("stats.versionCopy")}
-              >
-                {timestamp}
-                <br />
-                {hash}
-              </td>
-            </tr>
+            {props.renderCustomStats?.(props.elements, props.appState)}
           </tbody>
         </table>
       </Island>

src/components/Toast.scss

@@ -10,7 +10,7 @@
     cursor: default;
     left: 50%;
     margin-left: -150px;
-    padding: 4px 0;
+    padding: 8px;
     position: absolute;
     text-align: center;
     width: 300px;

src/constants.ts

@@ -1,5 +1,6 @@
 import { FontFamily } from "./element/types";
 import cssVariables from "./css/variables.module.scss";
+import { AppProps } from "./types";
 
 export const APP_NAME = "Excalidraw";
 
@@ -100,6 +101,7 @@ export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
 export const TOAST_TIMEOUT = 5000;
 export const VERSION_TIMEOUT = 30000;
+export const AUTO_SAVE_TIMEOUT = 500;
 export const SCROLL_TIMEOUT = 100;
 
 export const ZOOM_STEP = 0.1;
@@ -116,3 +118,23 @@ export const MODES = {
 };
 
 export const THEME_FILTER = cssVariables.themeFilter;
+
+export const URL_QUERY_KEYS = {
+  addLibrary: "addLibrary",
+} as const;
+
+export const URL_HASH_KEYS = {
+  addLibrary: "addLibrary",
+} as const;
+
+export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
+  canvasActions: {
+    changeViewBackgroundColor: true,
+    clearCanvas: true,
+    export: true,
+    loadScene: true,
+    saveAsScene: true,
+    saveScene: true,
+    theme: true,
+  },
+};

src/css/styles.scss

@@ -16,6 +16,8 @@
   bottom: 0;
   left: 0;
   right: 0;
+  height: 100%;
+  width: 100%;
 
   // serves 2 purposes:
   // 1. prevent selecting text outside the component when double-clicking or
@@ -47,6 +49,12 @@
     z-index: var(--zIndex-canvas);
   }
 
+  #canvas {
+    // Remove the main canvas from document flow to avoid resizeObserver
+    // feedback loop (see https://github.com/excalidraw/excalidraw/pull/3379)
+    position: absolute;
+  }
+
   &.theme--dark {
     // The percentage is inspired by
     // https://material.io/design/color/dark-theme.html#properties, which

src/data/blob.ts

@@ -1,5 +1,5 @@
 import { cleanAppStateForExport } from "../appState";
-import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
+import { EXPORT_DATA_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
 import { CanvasError } from "../errors";
 import { t } from "../i18n";
@@ -95,13 +95,7 @@ export const loadFromBlob = async (
         elements: clearElementsForExport(data.elements || []),
         appState: {
           theme: localAppState?.theme,
-          fileHandle:
-            blob.handle &&
-            ["application/json", MIME_TYPES.excalidraw].includes(
-              getMimeType(blob),
-            )
-              ? blob.handle
-              : null,
+          fileHandle: (!blob.type.startsWith("image/") && blob.handle) || null,
           ...cleanAppStateForExport(data.appState || {}),
           ...(localAppState
             ? calculateScrollCenter(data.elements || [], localAppState, null)

src/data/json.ts

@@ -27,6 +27,7 @@ export const serializeAsJSON = (
 export const saveAsJSON = async (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  onlyIfFileHandleValid = false,
 ) => {
   const serialized = serializeAsJSON(elements, appState);
   const blob = new Blob([serialized], {
@@ -41,6 +42,7 @@ export const saveAsJSON = async (
       extensions: [".excalidraw"],
     },
     appState.fileHandle,
+    onlyIfFileHandleValid,
   );
   return { fileHandle };
 };
@@ -116,5 +118,5 @@ export const importLibraryFromJSON = async () => {
     extensions: [".json", ".excalidrawlib"],
     */
   });
-  Library.importLibrary(blob);
+  await Library.importLibrary(blob);
 };

src/data/library.ts

@@ -4,9 +4,11 @@ import { restoreElements } from "./restore";
 import { STORAGE_KEYS } from "../constants";
 import { getNonDeletedElements } from "../element";
 import { NonDeleted, ExcalidrawElement } from "../element/types";
+import { nanoid } from "nanoid";
 
 export class Library {
   private static libraryCache: LibraryItems | null = null;
+  public static csrfToken = nanoid();
 
   static resetLibrary = () => {
     Library.libraryCache = null;

src/data/restore.ts

@@ -144,7 +144,7 @@ export const restoreElements = (
 export const restoreAppState = (
   appState: ImportedDataState["appState"],
   localAppState: Partial<AppState> | null,
-): AppState => {
+): DataState["appState"] => {
   appState = appState || {};
 
   const defaultAppState = getDefaultAppState();
@@ -166,8 +166,6 @@ export const restoreAppState = (
 
   return {
     ...nextAppState,
-    offsetLeft: appState.offsetLeft || 0,
-    offsetTop: appState.offsetTop || 0,
     // Migrates from previous version where appState.zoom was a number
     zoom:
       typeof appState.zoom === "number"

src/data/types.ts

@@ -6,7 +6,7 @@ export interface DataState {
   version?: string;
   source?: string;
   elements: readonly ExcalidrawElement[];
-  appState: MarkOptional<AppState, "offsetTop" | "offsetLeft">;
+  appState: Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 }
 
 export interface ImportedDataState {

src/element/resizeElements.ts

@@ -31,7 +31,7 @@ import {
 import { PointerDownState } from "../components/App";
 import { Point } from "../types";
 
-const normalizeAngle = (angle: number): number => {
+export const normalizeAngle = (angle: number): number => {
   if (angle >= 2 * Math.PI) {
     return angle - 2 * Math.PI;
   }
@@ -181,7 +181,7 @@ const getPerfectElementSizeWithRotation = (
   return rotate(size.width, size.height, 0, 0, -angle);
 };
 
-const reshapeSingleTwoPointElement = (
+export const reshapeSingleTwoPointElement = (
   element: NonDeleted<ExcalidrawLinearElement>,
   resizeArrowDirection: "origin" | "end",
   isRotateWithDiscreteAngle: boolean,
@@ -378,7 +378,7 @@ const resizeSingleTextElement = (
   }
 };
 
-const resizeSingleElement = (
+export const resizeSingleElement = (
   stateAtResizeStart: NonDeletedExcalidrawElement,
   shouldKeepSidesRatio: boolean,
   element: NonDeletedExcalidrawElement,

src/excalidraw-app/CustomStats.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from "react";
+import { debounce, getVersion, nFormatter } from "../utils";
+import {
+  getElementsStorageSize,
+  getTotalStorageSize,
+} from "./data/localStorage";
+import { DEFAULT_VERSION } from "../constants";
+import { t } from "../i18n";
+import { copyTextToSystemClipboard } from "../clipboard";
+type StorageSizes = { scene: number; total: number };
+
+const STORAGE_SIZE_TIMEOUT = 500;
+
+const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
+  cb({
+    scene: getElementsStorageSize(),
+    total: getTotalStorageSize(),
+  });
+}, STORAGE_SIZE_TIMEOUT);
+
+type Props = {
+  setToastMessage: (message: string) => void;
+};
+const CustomStats = (props: Props) => {
+  const [storageSizes, setStorageSizes] = useState<StorageSizes>({
+    scene: 0,
+    total: 0,
+  });
+
+  useEffect(() => {
+    getStorageSizes((sizes) => {
+      setStorageSizes(sizes);
+    });
+  });
+  useEffect(() => () => getStorageSizes.cancel(), []);
+
+  const version = getVersion();
+  let hash;
+  let timestamp;
+
+  if (version !== DEFAULT_VERSION) {
+    timestamp = version.slice(0, 16).replace("T", " ");
+    hash = version.slice(21);
+  } else {
+    timestamp = t("stats.versionNotAvailable");
+  }
+
+  return (
+    <>
+      <tr>
+        <th colSpan={2}>{t("stats.storage")}</th>
+      </tr>
+      <tr>
+        <td>{t("stats.scene")}</td>
+        <td>{nFormatter(storageSizes.scene, 1)}</td>
+      </tr>
+      <tr>
+        <td>{t("stats.total")}</td>
+        <td>{nFormatter(storageSizes.total, 1)}</td>
+      </tr>
+      <tr>
+        <th colSpan={2}>{t("stats.version")}</th>
+      </tr>
+      <tr>
+        <td
+          colSpan={2}
+          style={{ textAlign: "center", cursor: "pointer" }}
+          onClick={async () => {
+            try {
+              await copyTextToSystemClipboard(getVersion());
+              props.setToastMessage(t("toast.copyToClipboard"));
+            } catch {}
+          }}
+          title={t("stats.versionCopy")}
+        >
+          {timestamp}
+          <br />
+          {hash}
+        </td>
+      </tr>
+    </>
+  );
+};
+
+export default CustomStats;

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -38,7 +38,7 @@ import Portal from "./Portal";
 import RoomDialog from "./RoomDialog";
 import { createInverseContext } from "../../createInverseContext";
 import { t } from "../../i18n";
-import { UserIdleState } from "./types";
+import { UserIdleState } from "../../types";
 import { IDLE_THRESHOLD, ACTIVE_THRESHOLD } from "../../constants";
 import { trackEvent } from "../../analytics";
 
@@ -113,8 +113,8 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
       process.env.NODE_ENV === ENV.TEST ||
       process.env.NODE_ENV === ENV.DEVELOPMENT
     ) {
-      window.h = window.h || ({} as Window["h"]);
-      Object.defineProperties(window.h, {
+      window.collab = window.collab || ({} as Window["collab"]);
+      Object.defineProperties(window, {
         collab: {
           configurable: true,
           value: this,
@@ -658,4 +658,17 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
   }
 }
 
+declare global {
+  interface Window {
+    collab: InstanceType<typeof CollabWrapper>;
+  }
+}
+
+if (
+  process.env.NODE_ENV === ENV.TEST ||
+  process.env.NODE_ENV === ENV.DEVELOPMENT
+) {
+  window.collab = window.collab || ({} as Window["collab"]);
+}
+
 export default CollabWrapper;

src/excalidraw-app/collab/Portal.tsx

@@ -9,7 +9,7 @@ import CollabWrapper from "./CollabWrapper";
 import { getSyncableElements } from "../../packages/excalidraw/index";
 import { ExcalidrawElement } from "../../element/types";
 import { BROADCAST, SCENE } from "../app_constants";
-import { UserIdleState } from "./types";
+import { UserIdleState } from "../../types";
 import { trackEvent } from "../../analytics";
 
 class Portal {

src/excalidraw-app/collab/types.ts

@@ -1,5 +0,0 @@
-export enum UserIdleState {
-  ACTIVE = "active",
-  AWAY = "away",
-  IDLE = "idle",
-}

src/excalidraw-app/data/index.ts

@@ -3,8 +3,7 @@ import { restore } from "../../data/restore";
 import { ImportedDataState } from "../../data/types";
 import { ExcalidrawElement } from "../../element/types";
 import { t } from "../../i18n";
-import { AppState } from "../../types";
-import { UserIdleState } from "../collab/types";
+import { AppState, UserIdleState } from "../../types";
 
 const byteToHex = (byte: number): string => `0${byte.toString(16)}`.slice(-2);
 

src/excalidraw-app/data/localStorage.ts

@@ -101,7 +101,7 @@ export const importFromLocalStorage = () => {
 export const getElementsStorageSize = () => {
   try {
     const elements = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS);
-    const elementsSize = elements ? JSON.stringify(elements).length : 0;
+    const elementsSize = elements?.length || 0;
     return elementsSize;
   } catch (error) {
     console.error(error);
@@ -117,9 +117,9 @@ export const getTotalStorageSize = () => {
       APP_STORAGE_KEYS.LOCAL_STORAGE_LIBRARY,
     );
 
-    const appStateSize = appState ? JSON.stringify(appState).length : 0;
-    const collabSize = collab ? JSON.stringify(collab).length : 0;
-    const librarySize = library ? JSON.stringify(library).length : 0;
+    const appStateSize = appState?.length || 0;
+    const collabSize = collab?.length || 0;
+    const librarySize = library?.length || 0;
 
     return appStateSize + collabSize + librarySize + getElementsStorageSize();
   } catch (error) {

src/excalidraw-app/index.tsx

@@ -3,7 +3,6 @@ import React, {
   useCallback,
   useContext,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
 } from "react";
@@ -12,7 +11,13 @@ import { getDefaultAppState } from "../appState";
 import { ExcalidrawImperativeAPI } from "../components/App";
 import { ErrorDialog } from "../components/ErrorDialog";
 import { TopErrorBoundary } from "../components/TopErrorBoundary";
-import { APP_NAME, EVENT, TITLE_TIMEOUT, VERSION_TIMEOUT } from "../constants";
+import {
+  APP_NAME,
+  EVENT,
+  TITLE_TIMEOUT,
+  URL_HASH_KEYS,
+  VERSION_TIMEOUT,
+} from "../constants";
 import { loadFromBlob } from "../data/blob";
 import { DataState, ImportedDataState } from "../data/types";
 import {
@@ -44,6 +49,7 @@ import {
   importFromLocalStorage,
   saveToLocalStorage,
 } from "./data/localStorage";
+import CustomStats from "./CustomStats";
 
 const languageDetector = new LanguageDetector();
 languageDetector.init({
@@ -155,31 +161,11 @@ const initializeScene = async (opts: {
   return null;
 };
 
-function ExcalidrawWrapper() {
-  // dimensions
-  // ---------------------------------------------------------------------------
-
-  const [dimensions, setDimensions] = useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
-  });
+const ExcalidrawWrapper = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const currentLangCode = languageDetector.detect() || defaultLang.code;
   const [langCode, setLangCode] = useState(currentLangCode);
 
-  useLayoutEffect(() => {
-    const onResize = () => {
-      setDimensions({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    };
-
-    window.addEventListener("resize", onResize);
-
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
-
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -213,12 +199,24 @@ function ExcalidrawWrapper() {
       initialStatePromiseRef.current.promise.resolve(scene);
     });
 
-    const onHashChange = (_: HashChangeEvent) => {
-      initializeScene({ collabAPI }).then((scene) => {
-        if (scene) {
-          excalidrawAPI.updateScene(scene);
-        }
-      });
+    const onHashChange = (event: HashChangeEvent) => {
+      event.preventDefault();
+      const hash = new URLSearchParams(window.location.hash.slice(1));
+      const libraryUrl = hash.get(URL_HASH_KEYS.addLibrary);
+      if (libraryUrl) {
+        // If hash changed and it contains library url, import it and replace
+        // the url to its previous state (important in case of collaboration
+        // and similar).
+        // Using history API won't trigger another hashchange.
+        window.history.replaceState({}, "", event.oldURL);
+        excalidrawAPI.importLibrary(libraryUrl, hash.get("token"));
+      } else {
+        initializeScene({ collabAPI }).then((scene) => {
+          if (scene) {
+            excalidrawAPI.updateScene(scene);
+          }
+        });
+      }
     };
 
     const titleTimeout = setTimeout(
@@ -305,13 +303,19 @@ function ExcalidrawWrapper() {
     [langCode],
   );
 
+  const renderCustomStats = () => {
+    return (
+      <CustomStats
+        setToastMessage={(message) => excalidrawAPI!.setToastMessage(message)}
+      />
+    );
+  };
+
   return (
     <>
       <Excalidraw
         ref={excalidrawRefCallback}
         onChange={onChange}
-        width={dimensions.width}
-        height={dimensions.height}
         initialData={initialStatePromiseRef.current.promise}
         onCollabButtonClick={collabAPI?.onCollabButtonClick}
         isCollaborating={collabAPI?.isCollaborating()}
@@ -319,6 +323,7 @@ function ExcalidrawWrapper() {
         onExportToBackend={onExportToBackend}
         renderFooter={renderFooter}
         langCode={langCode}
+        renderCustomStats={renderCustomStats}
       />
       {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (
@@ -329,9 +334,9 @@ function ExcalidrawWrapper() {
       )}
     </>
   );
-}
+};
 
-export default function ExcalidrawApp() {
+const ExcalidrawApp = () => {
   return (
     <TopErrorBoundary>
       <CollabContextConsumer>
@@ -339,4 +344,6 @@ export default function ExcalidrawApp() {
       </CollabContextConsumer>
     </TopErrorBoundary>
   );
-}
+};
+
+export default ExcalidrawApp;

src/global.d.ts

@@ -89,3 +89,5 @@ interface Blob {
   handle?: import("browser-fs-acces").FileSystemHandle;
   name?: string;
 }
+
+declare module "*.scss";

src/index-node.ts

@@ -63,6 +63,8 @@ const canvas = exportToCanvas(
     ...getDefaultAppState(),
     offsetTop: 0,
     offsetLeft: 0,
+    width: 0,
+    height: 0,
   },
   {
     exportBackground: true,

src/is-mobile.tsx

@@ -34,7 +34,4 @@ export const IsMobileProvider = ({
 };
 
 export const isMobile = () => getIsMobileMatcher().matches;
-
-export default function useIsMobile() {
-  return useContext(context);
-}
+export const useIsMobile = () => useContext(context);

src/locales/ar-SA.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "توسيط أفقي",
     "distributeHorizontally": "التوزيع الأفقي",
     "distributeVertically": "التوزيع عمودياً",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "نمط العرض",
     "toggleExportColorScheme": "",
     "share": "مشاركة"
@@ -228,7 +230,8 @@
     "zoomToSelection": ""
   },
   "encrypted": {
-    "tooltip": "رسوماتك مشفرة من النهاية إلى النهاية حتى أن خوادم Excalidraw لن تراها أبدا."
+    "tooltip": "رسوماتك مشفرة من النهاية إلى النهاية حتى أن خوادم Excalidraw لن تراها أبدا.",
+    "link": ""
   },
   "stats": {
     "angle": "الزاوية",

src/locales/bg-BG.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Центрирай хоризонтално",
     "distributeHorizontally": "Разпредели хоризонтално",
     "distributeVertically": "Разпредели вертикално",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "Изглед",
     "toggleExportColorScheme": "",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": "Приближи селекцията"
   },
   "encrypted": {
-    "tooltip": "Вашите рисунки са криптирани от край до край, така че сървърите на Excalidraw няма да могат да ги виждат."
+    "tooltip": "Вашите рисунки са криптирани от край до край, така че сървърите на Excalidraw няма да могат да ги виждат.",
+    "link": ""
   },
   "stats": {
     "angle": "Ъгъл",

src/locales/ca-ES.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Centrar horitzontalment",
     "distributeHorizontally": "Distribuir horitzontalment",
     "distributeVertically": "Distribuir verticalment",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "Mode de visualització",
     "toggleExportColorScheme": "Canvia l'esquema de colors de l'exportació",
     "share": "Compartir"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Zoom per veure la selecció"
   },
   "encrypted": {
-    "tooltip": "Els vostres dibuixos estan xifrats de punta a punta de manera que els servidors d’Excalidraw no els veuran mai."
+    "tooltip": "Els vostres dibuixos estan xifrats de punta a punta de manera que els servidors d’Excalidraw no els veuran mai.",
+    "link": ""
   },
   "stats": {
     "angle": "Angle",

src/locales/de-DE.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Horizontal zentrieren",
     "distributeHorizontally": "Horizontal verteilen",
     "distributeVertically": "Vertikal verteilen",
+    "flipHorizontal": "Horizontal spiegeln",
+    "flipVertical": "Vertikal spiegeln",
     "viewMode": "Ansichtsmodus",
     "toggleExportColorScheme": "Farbschema für Export umschalten",
     "share": "Teilen"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Auf Auswahl zoomen"
   },
   "encrypted": {
-    "tooltip": "Da deine Zeichnungen Ende-zu-Ende verschlüsselt werden, sehen auch unsere Excalidraw-Server sie niemals."
+    "tooltip": "Da deine Zeichnungen Ende-zu-Ende verschlüsselt werden, sehen auch unsere Excalidraw-Server sie niemals.",
+    "link": "Blogbeitrag über Ende-zu-Ende-Verschlüsselung in Excalidraw"
   },
   "stats": {
     "angle": "Winkel",

src/locales/el-GR.json

@@ -61,7 +61,7 @@
     "architect": "Αρχιτέκτονας",
     "artist": "Καλλιτέχνης",
     "cartoonist": "Σκιτσογράφος",
-    "fileTitle": "",
+    "fileTitle": "Όνομα αρχείου",
     "colorPicker": "Επιλογή Χρώματος",
     "canvasBackground": "Φόντο καμβά",
     "drawingCanvas": "Σχεδίαση καμβά",
@@ -92,6 +92,8 @@
     "centerHorizontally": "Κέντρο οριζόντια",
     "distributeHorizontally": "Οριζόντια κατανομή",
     "distributeVertically": "Κατακόρυφη κατανομή",
+    "flipHorizontal": "Οριζόντια αναστροφή",
+    "flipVertical": "Κατακόρυφη αναστροφή",
     "viewMode": "Λειτουργία προβολής",
     "toggleExportColorScheme": "Εναλλαγή εξαγωγής θέματος χρωμάτων",
     "share": "Κοινοποίηση"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Ζουμ στην επιλογή"
   },
   "encrypted": {
-    "tooltip": "Τα σχέδιά σου είναι κρυπτογραφημένα από άκρο σε άκρο, έτσι δεν θα είναι ποτέ ορατά μέσα από τους διακομιστές του Excalidraw."
+    "tooltip": "Τα σχέδιά σου είναι κρυπτογραφημένα από άκρο σε άκρο, έτσι δεν θα είναι ποτέ ορατά μέσα από τους διακομιστές του Excalidraw.",
+    "link": ""
   },
   "stats": {
     "angle": "Γωνία",

src/locales/en.json

@@ -78,6 +78,8 @@
     "ungroup": "Ungroup selection",
     "collaborators": "Collaborators",
     "showGrid": "Show grid",
+    "toggleAutosave": "Autosave to current file",
+    "toggleAutosave_details": "Automatically save changes when working on an existing file.",
     "addToLibrary": "Add to library",
     "removeFromLibrary": "Remove from library",
     "libraryLoadingMessage": "Loading library…",
@@ -92,6 +94,8 @@
     "centerHorizontally": "Center horizontally",
     "distributeHorizontally": "Distribute horizontally",
     "distributeVertically": "Distribute vertically",
+    "flipHorizontal": "Flip horizontal",
+    "flipVertical": "Flip vertical",
     "viewMode": "View mode",
     "toggleExportColorScheme": "Toggle export color scheme",
     "share": "Share"
@@ -228,7 +232,8 @@
     "zoomToSelection": "Zoom to selection"
   },
   "encrypted": {
-    "tooltip": "Your drawings are end-to-end encrypted so Excalidraw's servers will never see them."
+    "tooltip": "Your drawings are end-to-end encrypted so Excalidraw's servers will never see them.",
+    "link": "Blog post on end-to-end encryption in Excalidraw"
   },
   "stats": {
     "angle": "Angle",
@@ -246,6 +251,9 @@
     "width": "Width"
   },
   "toast": {
+    "autosaveFailed_notAllowed": "Autosave was disabled.",
+    "autosaveFailed_notFound": "Autosave failed.\nIt seems the file no longer exists.",
+    "autosaveFailed": "Autosave failed.",
     "copyStyles": "Copied styles.",
     "copyToClipboard": "Copied to clipboard.",
     "copyToClipboardAsPng": "Copied {{exportSelection}} to clipboard as PNG\n({{exportColorScheme}})",

src/locales/es-ES.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Centrar horizontalmente",
     "distributeHorizontally": "Distribuir horizontalmente",
     "distributeVertically": "Distribuir verticalmente",
+    "flipHorizontal": "Girar horizontalmente",
+    "flipVertical": "Girar verticalmente",
     "viewMode": "Modo presentación",
     "toggleExportColorScheme": "Cambiar el esquema de colores de exportación",
     "share": "Compartir"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Hacer zoom a la selección"
   },
   "encrypted": {
-    "tooltip": "Tus dibujos están cifrados de punto a punto, por lo que los servidores de Excalidraw nunca los verán."
+    "tooltip": "Tus dibujos están cifrados de punto a punto, por lo que los servidores de Excalidraw nunca los verán.",
+    "link": ""
   },
   "stats": {
     "angle": "Ángulo",

src/locales/fa-IR.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "وسط قرار دادن به صورت افقی",
     "distributeHorizontally": "توزیع کردن به صورت افقی",
     "distributeVertically": "توزیع کردن به صورت عمودی",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "",
     "toggleExportColorScheme": "",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": "بزرگنمایی قسمت انتخاب شده"
   },
   "encrypted": {
-    "tooltip": "شما در یک محیط رمزگزاری شده دو طرفه در حال طراحی هستید پس Excalidraw هرگز طرح های شما را نمیبند."
+    "tooltip": "شما در یک محیط رمزگزاری شده دو طرفه در حال طراحی هستید پس Excalidraw هرگز طرح های شما را نمیبند.",
+    "link": ""
   },
   "stats": {
     "angle": "زاویه",

src/locales/fi-FI.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Keskitä vaakasuunnassa",
     "distributeHorizontally": "Jaa vaakasuunnassa",
     "distributeVertically": "Jaa pystysuunnassa",
+    "flipHorizontal": "Käännä vaakasuunnassa",
+    "flipVertical": "Käännä pystysuunnassa",
     "viewMode": "Katselutila",
     "toggleExportColorScheme": "Vaihda viennin väriteema",
     "share": "Jaa"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Näytä valinta"
   },
   "encrypted": {
-    "tooltip": "Piirroksesi ovat päästä-päähän-salattuja, joten Excalidrawin palvelimet eivät koskaan näe niitä."
+    "tooltip": "Piirroksesi ovat päästä-päähän-salattuja, joten Excalidrawin palvelimet eivät koskaan näe niitä.",
+    "link": ""
   },
   "stats": {
     "angle": "Kulma",

src/locales/fr-FR.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Centrer horizontalement",
     "distributeHorizontally": "Distribuer horizontalement",
     "distributeVertically": "Distribuer verticalement",
+    "flipHorizontal": "Retourner horizontalement",
+    "flipVertical": "Retourner verticalement",
     "viewMode": "Mode présentation",
     "toggleExportColorScheme": "Activer/Désactiver l'export du thème de couleur",
     "share": "Partager"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Zoomer sur la sélection"
   },
   "encrypted": {
-    "tooltip": "Vos dessins sont chiffrés de bout en bout, les serveurs d'Excalidraw ne les verront jamais."
+    "tooltip": "Vos dessins sont chiffrés de bout en bout, les serveurs d'Excalidraw ne les verront jamais.",
+    "link": "Article de blog sur le chiffrement de bout en bout dans Excalidraw"
   },
   "stats": {
     "angle": "Angle",

src/locales/he-IL.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "מרכז אופקית",
     "distributeHorizontally": "חלוקה אופקית",
     "distributeVertically": "חלוקה אנכית",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "מצב תצוגה",
     "toggleExportColorScheme": "",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": "התמקד בבחירה"
   },
   "encrypted": {
-    "tooltip": "הרישומים שלך מוצפנים מקצה לקצה כך שהשרתים של Excalidraw לא יראו אותם לעולם."
+    "tooltip": "הרישומים שלך מוצפנים מקצה לקצה כך שהשרתים של Excalidraw לא יראו אותם לעולם.",
+    "link": ""
   },
   "stats": {
     "angle": "זווית",

src/locales/hi-IN.json

@@ -61,7 +61,7 @@
     "architect": "वास्तुकार",
     "artist": "कलाकार",
     "cartoonist": "व्यंग्य चित्रकार",
-    "fileTitle": "",
+    "fileTitle": "फ़ाइल का नाम",
     "colorPicker": "रंग चयन",
     "canvasBackground": "कैनवास बैकग्राउंड",
     "drawingCanvas": "कैनवास बना रहे हैं",
@@ -92,6 +92,8 @@
     "centerHorizontally": "क्षैतिज केन्द्रित",
     "distributeHorizontally": "क्षैतिज रूप से वितरित करें",
     "distributeVertically": "खड़ी रूप से वितरित करें",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "",
     "toggleExportColorScheme": "",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": "चयन तक ज़ूम करे"
   },
   "encrypted": {
-    "tooltip": "आपके चित्र अंत-से-अंत एन्क्रिप्टेड हैं, इसलिए एक्सक्लूसिव्रॉव के सर्वर उन्हें कभी नहीं देखेंगे।"
+    "tooltip": "आपके चित्र अंत-से-अंत एन्क्रिप्टेड हैं, इसलिए एक्सक्लूसिव्रॉव के सर्वर उन्हें कभी नहीं देखेंगे।",
+    "link": ""
   },
   "stats": {
     "angle": "कोण",

src/locales/hu-HU.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Vízszintesen középre igazított",
     "distributeHorizontally": "Vízszintes elosztás",
     "distributeVertically": "Függőleges elosztás",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "",
     "toggleExportColorScheme": "",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": ""
   },
   "encrypted": {
-    "tooltip": "A rajzaidat végpontok közötti titkosítással tároljuk, tehát az Excalidraw szervereiről se tud más belenézni."
+    "tooltip": "A rajzaidat végpontok közötti titkosítással tároljuk, tehát az Excalidraw szervereiről se tud más belenézni.",
+    "link": ""
   },
   "stats": {
     "angle": "Szög",

src/locales/id-ID.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Pusatkan secara horizontal",
     "distributeHorizontally": "Distribusikan horizontal",
     "distributeVertically": "Distribusikan vertikal",
+    "flipHorizontal": "Balikkan horizontal",
+    "flipVertical": "Balikkan vertikal",
     "viewMode": "Mode tampilan",
     "toggleExportColorScheme": "Ubah skema warna ekspor",
     "share": "Bagikan"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Perbesar ke seleksi"
   },
   "encrypted": {
-    "tooltip": "Gambar anda terenkripsi end-to-end sehingga server Excalidraw tidak akan pernah dapat melihatnya."
+    "tooltip": "Gambar anda terenkripsi end-to-end sehingga server Excalidraw tidak akan pernah dapat melihatnya.",
+    "link": "Pos blog tentang enkripsi ujung ke ujung di Excalidraw"
   },
   "stats": {
     "angle": "Sudut",

src/locales/it-IT.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Centra orizzontalmente",
     "distributeHorizontally": "Distribuisci orizzontalmente",
     "distributeVertically": "Distribuisci verticalmente",
+    "flipHorizontal": "Capovolgi orizzontalmente",
+    "flipVertical": "Capovolgi verticalmente",
     "viewMode": "Modalità visualizzazione",
     "toggleExportColorScheme": "Cambia lo schema di colori in esportazione",
     "share": "Condividi"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Zoom alla selezione"
   },
   "encrypted": {
-    "tooltip": "I tuoi disegni sono crittografati end-to-end in modo che i server di Excalidraw non li possano mai vedere."
+    "tooltip": "I tuoi disegni sono crittografati end-to-end in modo che i server di Excalidraw non li possano mai vedere.",
+    "link": "Articolo del blog sulla crittografia end-to-end di Excalidraw"
   },
   "stats": {
     "angle": "Angolo",

src/locales/ja-JP.json

@@ -61,7 +61,7 @@
     "architect": "正確",
     "artist": "アート",
     "cartoonist": "漫画風",
-    "fileTitle": "",
+    "fileTitle": "ファイル名",
     "colorPicker": "色選択",
     "canvasBackground": "キャンバスの背景",
     "drawingCanvas": "キャンバスの描画",
@@ -92,6 +92,8 @@
     "centerHorizontally": "横方向に中央揃え",
     "distributeHorizontally": "水平方向に分散配置",
     "distributeVertically": "垂直方向に分散配置",
+    "flipHorizontal": "水平方向に反転",
+    "flipVertical": "垂直方向に反転",
     "viewMode": "閲覧モード",
     "toggleExportColorScheme": "",
     "share": ""
@@ -201,7 +203,7 @@
     "desc_inProgressIntro": "共同編集セッションが有効になっています。",
     "desc_shareLink": "下記URLを共同編集したい人に共有してください：",
     "desc_exitSession": "セッションを終了すると部屋から切断されますが、手元の環境で編集を続けることができます。変更内容は他の人には反映されません。",
-    "shareTitle": ""
+    "shareTitle": "Excalidrawのライブコラボレーションセッションに参加する"
   },
   "errorDialog": {
     "title": "エラー"
@@ -228,7 +230,8 @@
     "zoomToSelection": "選択要素にズーム"
   },
   "encrypted": {
-    "tooltip": "描画内容はエンドツーエンド暗号化が施されており、Excalidrawサーバーが内容を見ることはできません。"
+    "tooltip": "描画内容はエンドツーエンド暗号化が施されており、Excalidrawサーバーが内容を見ることはできません。",
+    "link": "Excalidrawのエンドツーエンド暗号化に関するブログ記事"
   },
   "stats": {
     "angle": "角度",
@@ -251,7 +254,7 @@
     "copyToClipboardAsPng": "",
     "fileSaved": "ファイルを保存しました",
     "fileSavedToFilename": "{filename} に保存しました",
-    "canvas": "",
+    "canvas": "キャンバス",
     "selection": ""
   }
 }

src/locales/kab-KAB.json

@@ -61,7 +61,7 @@
     "architect": "Amasdag",
     "artist": "Anaẓur",
     "cartoonist": "",
-    "fileTitle": "",
+    "fileTitle": "Isem n ufaylu",
     "colorPicker": "Amafran n yini",
     "canvasBackground": "Agilal n teɣzut n usuneɣ",
     "drawingCanvas": "Taɣzut n usuneɣ",
@@ -92,6 +92,8 @@
     "centerHorizontally": "Di tlemmast s uglawi",
     "distributeHorizontally": "Freq s uglawi",
     "distributeVertically": "Freq s yibeddi",
+    "flipHorizontal": "Tuttya taglawant",
+    "flipVertical": "Tuttya tubdidt",
     "viewMode": "Askar n tmuɣli",
     "toggleExportColorScheme": "Sermed/sens asifeḍ usentel n yini",
     "share": "Bḍu"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Simɣur ɣer tefrayt"
   },
   "encrypted": {
-    "tooltip": "Unuɣen-inek (m) ttuwgelhnen seg yixef s ixef dɣa iqeddacen n Excalidraw werǧin ad ten-walin. "
+    "tooltip": "Unuɣen-inek (m) ttuwgelhnen seg yixef s ixef dɣa iqeddacen n Excalidraw werǧin ad ten-walin. ",
+    "link": "Amagrad ɣef uwgelhen ixef s ixef di Excalidraw"
   },
   "stats": {
     "angle": "Tiɣmeṛt",

src/locales/ko-KR.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "수평으로 중앙 정렬",
     "distributeHorizontally": "수평으로 분배",
     "distributeVertically": "수직으로 분배",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "보기 모드",
     "toggleExportColorScheme": "",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": "선택 영역으로 확대/축소"
   },
   "encrypted": {
-    "tooltip": "그림은 종단 간 암호화되므로 Excalidraw의 서버는 절대로 내용을 알 수 없습니다."
+    "tooltip": "그림은 종단 간 암호화되므로 Excalidraw의 서버는 절대로 내용을 알 수 없습니다.",
+    "link": ""
   },
   "stats": {
     "angle": "각도",

src/locales/my-MM.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "အလျားလိုက်အလယ်ညှိ",
     "distributeHorizontally": "အလျားလိုက်",
     "distributeVertically": "ထောင်လိုက်",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "",
     "toggleExportColorScheme": "",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": ""
   },
   "encrypted": {
-    "tooltip": "ရေးဆွဲထားသောပုံများအား နှစ်ဘက်စွန်းတိုင်လျှို့ဝှက်ထားသဖြင့် Excalidraw ၏ဆာဗာများပင်လျှင်မြင်တွေ့ရမည်မဟုတ်ပါ။"
+    "tooltip": "ရေးဆွဲထားသောပုံများအား နှစ်ဘက်စွန်းတိုင်လျှို့ဝှက်ထားသဖြင့် Excalidraw ၏ဆာဗာများပင်လျှင်မြင်တွေ့ရမည်မဟုတ်ပါ။",
+    "link": ""
   },
   "stats": {
     "angle": "ထောင့်",

src/locales/nb-NO.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Midtstill horisontalt",
     "distributeHorizontally": "Distribuer horisontalt",
     "distributeVertically": "Distribuer vertikalt",
+    "flipHorizontal": "Snu horisontalt",
+    "flipVertical": "Snu vertikalt",
     "viewMode": "Visningsmodus",
     "toggleExportColorScheme": "Veksle eksport av fargepalett",
     "share": "Del"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Zoom til utvalg"
   },
   "encrypted": {
-    "tooltip": "Dine tegninger er ende-til-ende-krypterte slik at Excalidraw sine servere aldri vil se dem."
+    "tooltip": "Dine tegninger er ende-til-ende-krypterte slik at Excalidraw sine servere aldri vil se dem.",
+    "link": "Blogginnlegg om ende-til-ende-kryptering i Excalidraw"
   },
   "stats": {
     "angle": "Vinkel",

src/locales/nl-NL.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Horizontaal Centreren",
     "distributeHorizontally": "Horizontaal verspreiden",
     "distributeVertically": "Verticaal distribueren",
+    "flipHorizontal": "Horizontaal spiegelen",
+    "flipVertical": "Verticaal spiegelen",
     "viewMode": "Weergavemodus",
     "toggleExportColorScheme": "Kleurenschema exporteren aan/uit",
     "share": "Deel"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Inzoomen op selectie"
   },
   "encrypted": {
-    "tooltip": "Je tekeningen zijn beveiligd met end-to-end encryptie, dus Excalidraw's servers zullen nooit zien wat je tekent."
+    "tooltip": "Je tekeningen zijn beveiligd met end-to-end encryptie, dus Excalidraw's servers zullen nooit zien wat je tekent.",
+    "link": "Blog post over end-to-end versleuteling in Excalidraw"
   },
   "stats": {
     "angle": "Hoek",

src/locales/nn-NO.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Midtstill horisontalt",
     "distributeHorizontally": "Sprei horisontalt",
     "distributeVertically": "Sprei vertikalt",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "",
     "toggleExportColorScheme": "",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": ""
   },
   "encrypted": {
-    "tooltip": "Teikningane dine er ende-til-ende-krypterte slik at Excalidraw sine serverar aldri får sjå dei."
+    "tooltip": "Teikningane dine er ende-til-ende-krypterte slik at Excalidraw sine serverar aldri får sjå dei.",
+    "link": ""
   },
   "stats": {
     "angle": "Vinkel",

src/locales/oc-FR.json

@@ -38,7 +38,7 @@
     "fontSize": "Talha poliça",
     "fontFamily": "Familha de poliça",
     "onlySelected": "Seleccion sonque",
-    "withBackground": "Inclure rèireplan",
+    "withBackground": "Inclure lo rèireplan",
     "exportEmbedScene": "Integrar la scèna al fichièr d’expo",
     "exportEmbedScene_details": "Las donadas de scèna seràn enregistradas dins lo fichièr PNG/SVG exportat, per que la scèna pòsca èsser restaurada a partir d’aqueste fichièr.\nAumentarà la talha del fichièr exportat.",
     "addWatermark": "Apondre « Fabricat amb Excalidraw »",
@@ -92,6 +92,8 @@
     "centerHorizontally": "Centrar orizontalament",
     "distributeHorizontally": "Distribuir orizontalament",
     "distributeVertically": "Distribuir verticalament",
+    "flipHorizontal": "Virar orizontalament",
+    "flipVertical": "Virar verticalament",
     "viewMode": "Mòde de vista",
     "toggleExportColorScheme": "Alternar l’esquèma de color d’expòrt",
     "share": "Partejar"
@@ -99,8 +101,8 @@
   "buttons": {
     "clearReset": "Reïnicializar lo canabàs",
     "export": "Exportar",
-    "exportToPng": "Export en PNG",
-    "exportToSvg": "Export en SVG",
+    "exportToPng": "Exportar en PNG",
+    "exportToSvg": "Exportar en SVG",
     "copyToClipboard": "Copiar al quichapapièrs",
     "copyPngToClipboard": "Copiar PNG al quichapapièrs",
     "scale": "Escala",
@@ -228,7 +230,8 @@
     "zoomToSelection": "Zoomar la seleccion"
   },
   "encrypted": {
-    "tooltip": "Vòstres dessenhs son chifrats del cap a la fin en consequéncia los servidors d’Excalidraw los veiràn pas jamai."
+    "tooltip": "Vòstres dessenhs son chifrats del cap a la fin en consequéncia los servidors d’Excalidraw los veiràn pas jamai.",
+    "link": "Article de blòg sul chiframent del cap a la fin dins Excalidraw"
   },
   "stats": {
     "angle": "Angle",

src/locales/pa-IN.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "ਖੜ੍ਹਵੇਂ ਵਿਚਕਾਰ ਕਰੋ",
     "distributeHorizontally": "ਖੜ੍ਹਵੇਂ ਇਕਸਾਰ ਵੰਡੋ",
     "distributeVertically": "ਲੇਟਵੇਂ ਇਕਸਾਰ ਵੰਡੋ",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "ਦੇਖੋ ਮੋਡ",
     "toggleExportColorScheme": "",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": "ਚੋਣ ਤੱਕ ਜ਼ੂਮ ਕਰੋ"
   },
   "encrypted": {
-    "tooltip": "ਤੁਹਾਡੀ ਡਰਾਇੰਗਾਂ ਸਿਰੇ-ਤੋਂ-ਸਿਰੇ ਤੱਕ ਇਨਕਰਿਪਟ ਕੀਤੀਆਂ ਹੋਈਆਂ ਹਨ, ਇਸ ਲਈ Excalidraw ਦੇ ਸਰਵਰ ਉਹਨਾਂ ਨੂੰ ਕਦੇ ਵੀ ਨਹੀਂ ਦੇਖਣਗੇ।"
+    "tooltip": "ਤੁਹਾਡੀ ਡਰਾਇੰਗਾਂ ਸਿਰੇ-ਤੋਂ-ਸਿਰੇ ਤੱਕ ਇਨਕਰਿਪਟ ਕੀਤੀਆਂ ਹੋਈਆਂ ਹਨ, ਇਸ ਲਈ Excalidraw ਦੇ ਸਰਵਰ ਉਹਨਾਂ ਨੂੰ ਕਦੇ ਵੀ ਨਹੀਂ ਦੇਖਣਗੇ।",
+    "link": ""
   },
   "stats": {
     "angle": "ਕੋਣ",

src/locales/percentages.json

@@ -1,37 +1,37 @@
 {
-  "ar-SA": 86,
-  "bg-BG": 94,
-  "ca-ES": 99,
+  "ar-SA": 85,
+  "bg-BG": 93,
+  "ca-ES": 98,
   "de-DE": 100,
   "el-GR": 98,
   "en": 100,
-  "es-ES": 100,
-  "fa-IR": 89,
-  "fi-FI": 100,
+  "es-ES": 99,
+  "fa-IR": 88,
+  "fi-FI": 99,
   "fr-FR": 100,
-  "he-IL": 90,
-  "hi-IN": 92,
-  "hu-HU": 82,
+  "he-IL": 89,
+  "hi-IN": 91,
+  "hu-HU": 81,
   "id-ID": 100,
   "it-IT": 100,
-  "ja-JP": 96,
-  "kab-KAB": 98,
-  "ko-KR": 94,
-  "my-MM": 77,
+  "ja-JP": 97,
+  "kab-KAB": 99,
+  "ko-KR": 92,
+  "my-MM": 76,
   "nb-NO": 100,
   "nl-NL": 100,
-  "nn-NO": 84,
+  "nn-NO": 83,
   "oc-FR": 100,
-  "pa-IN": 95,
-  "pl-PL": 96,
+  "pa-IN": 94,
+  "pl-PL": 95,
   "pt-BR": 100,
-  "pt-PT": 96,
+  "pt-PT": 95,
   "ro-RO": 100,
-  "ru-RU": 100,
-  "sk-SK": 100,
+  "ru-RU": 98,
+  "sk-SK": 99,
   "sv-SE": 100,
-  "tr-TR": 97,
-  "uk-UA": 100,
+  "tr-TR": 99,
+  "uk-UA": 99,
   "zh-CN": 99,
-  "zh-TW": 100
+  "zh-TW": 99
 }

src/locales/pl-PL.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Wyśrodkuj w poziomie",
     "distributeHorizontally": "Rozłóż poziomo",
     "distributeVertically": "Rozłóż pionowo",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "Tryb widoku",
     "toggleExportColorScheme": "",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": "Przybliż do zaznaczenia"
   },
   "encrypted": {
-    "tooltip": "Twoje rysunki są zabezpieczone szyfrowaniem end-to-end, tak więc nawet w Excalidraw nie jesteśmy w stanie zobaczyć tego co tworzysz."
+    "tooltip": "Twoje rysunki są zabezpieczone szyfrowaniem end-to-end, tak więc nawet w Excalidraw nie jesteśmy w stanie zobaczyć tego co tworzysz.",
+    "link": ""
   },
   "stats": {
     "angle": "Kąt",

src/locales/pt-BR.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Centralizar horizontalmente",
     "distributeHorizontally": "Distribuir horizontalmente",
     "distributeVertically": "Distribuir verticalmente",
+    "flipHorizontal": "Inverter horizontalmente",
+    "flipVertical": "Inverter verticalmente",
     "viewMode": "Modo de visualização",
     "toggleExportColorScheme": "Alternar esquema de cores de exportação",
     "share": "Compartilhar"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Ampliar a seleção"
   },
   "encrypted": {
-    "tooltip": "Seus desenhos são criptografados de ponta a ponta, então os servidores do Excalidraw nunca os verão."
+    "tooltip": "Seus desenhos são criptografados de ponta a ponta, então os servidores do Excalidraw nunca os verão.",
+    "link": "Postagem de blog com uma criptografia de ponta a ponta no Excalidraw"
   },
   "stats": {
     "angle": "Ângulo",

src/locales/pt-PT.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Centralizar horizontalmente",
     "distributeHorizontally": "Distribuir horizontalmente",
     "distributeVertically": "Distribuir verticalmente",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "Modo de visualização",
     "toggleExportColorScheme": "Alternar esquema de cores de exportação",
     "share": ""
@@ -228,7 +230,8 @@
     "zoomToSelection": "Ampliar a seleção"
   },
   "encrypted": {
-    "tooltip": "Seus desenhos são criptografados de ponta a ponta, então os servidores do Excalidraw nunca os verão."
+    "tooltip": "Seus desenhos são criptografados de ponta a ponta, então os servidores do Excalidraw nunca os verão.",
+    "link": ""
   },
   "stats": {
     "angle": "Ângulo",

src/locales/ro-RO.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Centrare orizontală",
     "distributeHorizontally": "Distribuie orizontal",
     "distributeVertically": "Distribuie vertical",
+    "flipHorizontal": "Răsturnare orizontală",
+    "flipVertical": "Răsturnare verticală",
     "viewMode": "Mod de vizualizare",
     "toggleExportColorScheme": "Comutare schemă de culori de export",
     "share": "Distribuie"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Panoramare la selecție"
   },
   "encrypted": {
-    "tooltip": "Desenele tale sunt criptate integral, astfel că serverele Excalidraw nu le vor vedea niciodată."
+    "tooltip": "Desenele tale sunt criptate integral, astfel că serverele Excalidraw nu le vor vedea niciodată.",
+    "link": "Articol de blog pe criptarea integrală din Excalidraw"
   },
   "stats": {
     "angle": "Unghi",

src/locales/ru-RU.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Центрировать по горизонтали",
     "distributeHorizontally": "Распределить по горизонтали",
     "distributeVertically": "Распределить по вертикали",
+    "flipHorizontal": "",
+    "flipVertical": "",
     "viewMode": "Вид",
     "toggleExportColorScheme": "Экспортировать цветовую схему",
     "share": "Поделиться"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Увеличить до выделенного"
   },
   "encrypted": {
-    "tooltip": "Ваши данные защищены сквозным (End-to-end) шифрованием. Серверы Excalidraw никогда не получат доступ к ним."
+    "tooltip": "Ваши данные защищены сквозным (End-to-end) шифрованием. Серверы Excalidraw никогда не получат доступ к ним.",
+    "link": ""
   },
   "stats": {
     "angle": "Угол",

src/locales/sk-SK.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Zarovnať vodorovne na stred",
     "distributeHorizontally": "Rozmiestniť vodorovne",
     "distributeVertically": "Rozmiestniť zvisle",
+    "flipHorizontal": "Prevrátiť vodorovne",
+    "flipVertical": "Prevrátiť zvislo",
     "viewMode": "Režim zobrazenia",
     "toggleExportColorScheme": "Prepnúť exportovanie farebnej schémy",
     "share": "Zdieľať"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Priblížiť na výber"
   },
   "encrypted": {
-    "tooltip": "Vaše kresby používajú end-to-end šifrovanie, takže ich Excalidraw server nedokáže prečítať."
+    "tooltip": "Vaše kresby používajú end-to-end šifrovanie, takže ich Excalidraw server nedokáže prečítať.",
+    "link": ""
   },
   "stats": {
     "angle": "Uhol",

src/locales/sv-SE.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Centrera horisontellt",
     "distributeHorizontally": "Fördela horisontellt",
     "distributeVertically": "Fördela vertikalt",
+    "flipHorizontal": "Vänd horisontellt",
+    "flipVertical": "Vänd vertikalt",
     "viewMode": "Visningsläge",
     "toggleExportColorScheme": "Växla färgschema för export",
     "share": "Dela"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Zooma till markering"
   },
   "encrypted": {
-    "tooltip": "Dina skisser är krypterade från ände till ände så Excalidraws servrar kommer aldrig att se dem."
+    "tooltip": "Dina skisser är krypterade från ände till ände så Excalidraws servrar kommer aldrig att se dem.",
+    "link": "Blogginlägg om kryptering från ände till ände i Excalidraw"
   },
   "stats": {
     "angle": "Vinkel",

src/locales/tr-TR.json

@@ -92,8 +92,10 @@
     "centerHorizontally": "Yatayda ortala",
     "distributeHorizontally": "Yatay dağıt",
     "distributeVertically": "Dikey dağıt",
-    "viewMode": "",
-    "toggleExportColorScheme": "",
+    "flipHorizontal": "Yatay döndür",
+    "flipVertical": "Dikey döndür",
+    "viewMode": "Görünüm modu",
+    "toggleExportColorScheme": "Renk şemasını dışa aktar/aktarma",
     "share": "Paylaş"
   },
   "buttons": {
@@ -213,22 +215,23 @@
     "curvedLine": "Eğri çizgi",
     "documentation": "Dokümantasyon",
     "drag": "sürükle",
-    "editor": "",
+    "editor": "Düzenleyici",
     "github": "Bir hata mı buldun? Bildir",
     "howto": "Rehberlerimizi takip edin",
     "or": "veya",
-    "preventBinding": "",
+    "preventBinding": "Ok bağlamayı önleyin",
     "shapes": "Şekiller",
     "shortcuts": "Klavye kısayolları",
     "textFinish": "(Metin) düzenlemeyi bitir",
     "textNewLine": "Yeni satır ekle (metin)",
     "title": "Yardım",
-    "view": "",
+    "view": "Görünüm",
     "zoomToFit": "Tüm öğeleri sığdırmak için yakınlaştır",
     "zoomToSelection": "Seçime yakınlaş"
   },
   "encrypted": {
-    "tooltip": "Çizimleriniz uçtan-uca şifrelenmiştir, Excalidraw'ın sunucuları bile onları göremez."
+    "tooltip": "Çizimleriniz uçtan-uca şifrelenmiştir, Excalidraw'ın sunucuları bile onları göremez.",
+    "link": ""
   },
   "stats": {
     "angle": "Açı",

src/locales/uk-UA.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "Центрувати по горизонталі",
     "distributeHorizontally": "Розподілити по горизонталі",
     "distributeVertically": "Розподілити вертикально",
+    "flipHorizontal": "Віддзеркалити горизонтально",
+    "flipVertical": "Віддзеркалити вертикально",
     "viewMode": "Режим перегляду",
     "toggleExportColorScheme": "Переключити колірну схему експорту",
     "share": "Поділитися"
@@ -228,7 +230,8 @@
     "zoomToSelection": "Наблизити вибране"
   },
   "encrypted": {
-    "tooltip": "Ваші креслення захищені наскрізним шифруванням — сервери Excalidraw ніколи їх не побачать."
+    "tooltip": "Ваші креслення захищені наскрізним шифруванням — сервери Excalidraw ніколи їх не побачать.",
+    "link": ""
   },
   "stats": {
     "angle": "Кут",

src/locales/zh-CN.json

@@ -25,7 +25,7 @@
     "strokeStyle_dashed": "虚线",
     "strokeStyle_dotted": "点虚线",
     "sloppiness": "边框",
-    "opacity": "透明度",
+    "opacity": "不透明度",
     "textAlign": "文本对齐",
     "edges": "边角",
     "sharp": "尖锐",
@@ -38,7 +38,7 @@
     "fontSize": "字体大小",
     "fontFamily": "字体",
     "onlySelected": "仅被选中",
-    "withBackground": "使用背景",
+    "withBackground": "包括背景",
     "exportEmbedScene": "将画布数据嵌入到导出的文件",
     "exportEmbedScene_details": "画布数据将被保存到导出的 PNG/SVG 文件，以便恢复。\n将会增加导出的文件大小。",
     "addWatermark": "添加 “使用 Excalidraw 创建” 水印",
@@ -61,7 +61,7 @@
     "architect": "朴素",
     "artist": "艺术",
     "cartoonist": "漫画家",
-    "fileTitle": "",
+    "fileTitle": "文件名",
     "colorPicker": "调色盘",
     "canvasBackground": "画布背景",
     "drawingCanvas": "绘制 Canvas",
@@ -92,6 +92,8 @@
     "centerHorizontally": "水平居中",
     "distributeHorizontally": "水平等距分布",
     "distributeVertically": "垂直等距分布",
+    "flipHorizontal": "水平翻转",
+    "flipVertical": "垂直翻转",
     "viewMode": "查看模式",
     "toggleExportColorScheme": "切换导出配色方案",
     "share": "分享"
@@ -128,7 +130,7 @@
     "exitZenMode": "退出禅模式"
   },
   "alerts": {
-    "clearReset": "这将会清除整个 画板。您是否要继续?",
+    "clearReset": "这将会清除整个画布。您是否要继续?",
     "couldNotCreateShareableLink": "无法创建共享链接",
     "couldNotCreateShareableLinkTooBig": "无法创建可共享链接：画布过大",
     "couldNotLoadInvalidFile": "无法加载无效的文件",
@@ -228,7 +230,8 @@
     "zoomToSelection": "缩放到选区"
   },
   "encrypted": {
-    "tooltip": "您的绘图采用的端到端加密，其内容对于Excalidraw服务器是不可见的。"
+    "tooltip": "您的绘图采用的端到端加密，其内容对于Excalidraw服务器是不可见的。",
+    "link": ""
   },
   "stats": {
     "angle": "角度",

src/locales/zh-TW.json

@@ -92,6 +92,8 @@
     "centerHorizontally": "水平置中",
     "distributeHorizontally": "水平分布",
     "distributeVertically": "垂直分布",
+    "flipHorizontal": "水平翻轉",
+    "flipVertical": "垂直翻轉",
     "viewMode": "檢視模式",
     "toggleExportColorScheme": "切換輸出配色",
     "share": "共享"
@@ -228,7 +230,8 @@
     "zoomToSelection": "縮放至選取區"
   },
   "encrypted": {
-    "tooltip": "你的作品已使用 end-to-end 方式加密，Excalidraw 的伺服器也無法取得其內容。"
+    "tooltip": "你的作品已使用 end-to-end 方式加密，Excalidraw 的伺服器也無法取得其內容。",
+    "link": ""
   },
   "stats": {
     "angle": "角度",

src/packages/excalidraw/CHANGELOG.md

@@ -6,12 +6,70 @@ The change should be grouped under one of the below section and must contain PR
 - Features: For new features.
 - Fixes: For bug fixes.
 - Chore: Changes for non src files example package.json.
-- Improvements: For any improvements.
 - Refactor: For any refactoring.
 
 Please add the latest change on the top under the correct section.
 -->
 
+## 0.6.0 (2021-04-04)
+
+## Excalidraw API
+
+### Features
+
+- Add `UIOptions` prop to customise `canvas actions` which includes customising `background color picker`, `clear canvas`, `export`, `load`, `save`, `save as` & `theme toggle` [#3364](https://github.com/excalidraw/excalidraw/pull/3364). Check the [readme](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#uioptions) for more details.
+- Calculate `width/height` of canvas based on excalidraw component (".excalidraw" selector) & also resize and update offsets whenever the dimensions of excalidraw component gets updated [#3379](https://github.com/excalidraw/excalidraw/pull/3379). You also don't need to add a resize handler anymore for excalidraw as its handled now in excalidraw itself.
+  #### BREAKING CHANGE
+  - `width/height` props have been removed. Instead now it takes `100%` of `width` and `height` of the container so you need to make sure the container in which you are rendering Excalidraw has non zero dimensions (It should have non zero width and height so Excalidraw can match the dimensions of containing block)
+- Calculate offsets when excalidraw container resizes using resize observer api [#3374](https://github.com/excalidraw/excalidraw/pull/3374).
+- Export types for the package so now it can be used with typescript [#3337](https://github.com/excalidraw/excalidraw/pull/3337). The types are available at `@excalidraw/excalidraw/types`.
+- Add `renderCustomStats` prop to render extra stats on host, and expose `setToastMessage` API via refs which can be used to show toast with custom message [#3360](https://github.com/excalidraw/excalidraw/pull/3360).
+- Support passing a CSRF token when importing libraries to prevent prompting before installation. The token is passed from [https://libraries.excalidraw.com](https://libraries.excalidraw.com/) using the `token` URL key [#3329](https://github.com/excalidraw/excalidraw/pull/3329).
+- #### BREAKING CHANGE
+  Use `location.hash` when importing libraries to fix installation issues. This will require host apps to add a `hashchange` listener and call the newly exposed `excalidrawAPI.importLibrary(url)` API when applicable [#3320](https://github.com/excalidraw/excalidraw/pull/3320). Check the [readme](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#importlibrary) for more details.
+- Append `location.pathname` to `libraryReturnUrl` default url [#3325](https://github.com/excalidraw/excalidraw/pull/3325).
+
+### Build
+
+- Expose separate builds for dev and prod and support source maps in dev build [#3330](https://github.com/excalidraw/excalidraw/pull/3330). Check the [readme](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#installation) for more details.
+  #### BREAKING CHANGE
+  - If you are using script tag to embed excalidraw then the name of the file will have to be updated to `excalidraw.production.min.js` instead of `excalidraw.min.js`. If you want to use dev build you can use `excalidraw.development.js`
+
+### Refactor
+
+#### BREAKING CHANGE
+
+- Rename the API `setCanvasOffsets` exposed via [`ref`](https://github.com/excalidraw/excalidraw/blob/master/src/components/App.tsx#L265) to `refresh` [#3398](https://github.com/excalidraw/excalidraw/pull/3398).
+
+## Excalidraw Library
+
+### Features
+
+- Reopen library menu on import from file [#3383](https://github.com/excalidraw/excalidraw/pull/3383).
+- Don't unnecessarily prompt when installing libraries [#3329](https://github.com/excalidraw/excalidraw/pull/3329).
+- Add option to flip single element on the context menu [#2520](https://github.com/excalidraw/excalidraw/pull/2520).
+- Replace fontSize and fontFamily text with icons [#2857](https://github.com/excalidraw/excalidraw/pull/2857).
+
+### Fixes
+
+- Export dialog canvas positioning [#3397](https://github.com/excalidraw/excalidraw/pull/3397).
+- Don't share collab types with core [#3353](https://github.com/excalidraw/excalidraw/pull/3353).
+- Support d&d of files without extension [#3168](https://github.com/excalidraw/excalidraw/pull/3168).
+- Positions stats for linear elements [#3331](https://github.com/excalidraw/excalidraw/pull/3331).
+- Debounce.flush invokes func even if never queued before [#3326](https://github.com/excalidraw/excalidraw/pull/3326).
+- State selection state on opening contextMenu [#3333](https://github.com/excalidraw/excalidraw/pull/3333).
+- Add unique key for library header to resolve dev warnings [#3316](https://github.com/excalidraw/excalidraw/pull/3316).
+- disallow create text in viewMode on mobile [#3219](https://github.com/excalidraw/excalidraw/pull/3219).
+- Make help toggle tabbable [#3310](https://github.com/excalidraw/excalidraw/pull/3310)
+- Show Windows share icon for Windows users [#3306](https://github.com/excalidraw/excalidraw/pull/3306).
+- Don't scroll to content on INIT websocket message [#3291](https://github.com/excalidraw/excalidraw/pull/3291).
+
+### Refactor
+
+- Use arrow function where possible [#3315](https://github.com/excalidraw/excalidraw/pull/3315).
+
+---
+
 ## 0.5.0 (2021-03-21)
 
 ## Excalidraw API

src/packages/excalidraw/README.md

@@ -1,6 +1,6 @@
 ### Excalidraw
 
-Excalidraw exported as a component to directly embed in your projects
+Excalidraw exported as a component to directly embed in your projects.
 
 ### Installation
 
@@ -16,22 +16,25 @@ or via yarn
 yarn add react react-dom @excalidraw/excalidraw
 ```
 
-After installation you will see a folder `excalidraw-assets` in `dist` directory which contains the assets needed for this app.
+After installation you will see a folder `excalidraw-assets` and `excalidraw-assets-dev` in `dist` directory which contains the assets needed for this app in prod and dev mode respectively.
 
-Move the folder `excalidraw-assets` to the path where your assets are served.
+Move the folder `excalidraw-assets` and `excalidraw-assets-dev` to the path where your assets are served.
 
 By default it will try to load the files from `https://unpkg.com/@excalidraw/excalidraw/{currentVersion}/dist/`
 
-If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` to the url from where you want to load the assets.
+If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` depending on environment (for example if you have different URL's for dev and prod) to the url from where you want to load the assets.
 
 ### Demo
 
 [Try here](https://codesandbox.io/s/excalidraw-ehlz3).
 
-<details id="usage">
-<summary><strong>Usage</strong></summary>
+### Usage
 
-1. If you are using a Web bundler (for instance, Webpack), you can import it as an ES6 module as shown below
+#### Using Web Bundler
+
+If you are using a Web bundler (for instance, Webpack), you can import it as an ES6 module as shown below
+
+<details><summary><strong>View Example</strong></summary>
 
 ```js
 import React, { useEffect, useState, useRef } from "react";
@@ -42,33 +45,11 @@ import "./styles.scss";
 
 export default function App() {
   const excalidrawRef = useRef(null);
-  const excalidrawWrapperRef = useRef(null);
-  const [dimensions, setDimensions] = useState({
-    width: undefined,
-    height: undefined,
-  });
 
   const [viewModeEnabled, setViewModeEnabled] = useState(false);
   const [zenModeEnabled, setZenModeEnabled] = useState(false);
   const [gridModeEnabled, setGridModeEnabled] = useState(false);
 
-  useEffect(() => {
-    setDimensions({
-      width: excalidrawWrapperRef.current.getBoundingClientRect().width,
-      height: excalidrawWrapperRef.current.getBoundingClientRect().height,
-    });
-    const onResize = () => {
-      setDimensions({
-        width: excalidrawWrapperRef.current.getBoundingClientRect().width,
-        height: excalidrawWrapperRef.current.getBoundingClientRect().height,
-      });
-    };
-
-    window.addEventListener("resize", onResize);
-
-    return () => window.removeEventListener("resize", onResize);
-  }, [excalidrawWrapperRef]);
-
   const updateScene = () => {
     const sceneData = {
       elements: [
@@ -141,13 +122,11 @@ export default function App() {
           Grid mode
         </label>
       </div>
-      <div className="excalidraw-wrapper" ref={excalidrawWrapperRef}>
+      <div className="excalidraw-wrapper">
         <Excalidraw
           ref={excalidrawRef}
-          width={dimensions.width}
-          height={dimensions.height}
           initialData={InitialData}
-          onChange={(elements, state) =>
+          onChange={(elements, state) => {
             console.log("Elements :", elements, "State : ", state)
           }
           onPointerUpdate={(payload) => console.log(payload)}
@@ -168,9 +147,48 @@ To view the full example visit :point_down:
 
 [![Edit excalidraw](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-ehlz3?fontsize=14&hidenavigation=1&theme=dark)
 
-2. To use it in a browser directly:
+</details>
 
-You will need to make sure `react`, `react-dom` is available as shown below.
+Since Excalidraw doesn't support server side rendering yet so you will have to make sure the component is rendered once host is mounted.
+
+```js
+import { useState, useEffect } from "react";
+export default function IndexPage() {
+  const [Comp, setComp] = useState(null);
+  useEffect(() => {
+    import("@excalidraw/excalidraw").then((comp) => setComp(comp.default));
+  });
+  return <>{Comp && <Comp />}</>;
+}
+```
+
+The `types` are available at `@excalidraw/excalidraw/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)
+
+#### In Browser
+
+To use it in a browser directly:
+
+For development use :point_down:
+
+```js
+<script
+  type="text/javascript"
+  src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.development.js"
+></script>
+```
+
+For production use :point_down:
+
+```js
+<script
+  type="text/javascript"
+  src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.production.min.js"
+></script>
+```
+
+You will need to make sure `react`, `react-dom` is available as shown in the below example. For prod please use the production versions of `react`, `react-dom`.
+
+<details><summary><strong>View Example</strong></summary>
 
 ```html
 <!DOCTYPE html>
@@ -183,7 +201,7 @@ You will need to make sure `react`, `react-dom` is available as shown below.
 
     <script
       type="text/javascript"
-      src="https://unpkg.com/@excalidraw/excalidraw@0.4.1/dist/excalidraw.min.js"
+      src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.development.js"
     ></script>
   </head>
 
@@ -204,33 +222,11 @@ import InitialData from "./initialData";
 
 const App = () => {
   const excalidrawRef = React.useRef(null);
-  const excalidrawWrapperRef = React.useRef(null);
-  const [dimensions, setDimensions] = React.useState({
-    width: undefined,
-    height: undefined,
-  });
 
   const [viewModeEnabled, setViewModeEnabled] = React.useState(false);
   const [zenModeEnabled, setZenModeEnabled] = React.useState(false);
   const [gridModeEnabled, setGridModeEnabled] = React.useState(false);
 
-  React.useEffect(() => {
-    setDimensions({
-      width: excalidrawWrapperRef.current.getBoundingClientRect().width,
-      height: excalidrawWrapperRef.current.getBoundingClientRect().height,
-    });
-    const onResize = () => {
-      setDimensions({
-        width: excalidrawWrapperRef.current.getBoundingClientRect().width,
-        height: excalidrawWrapperRef.current.getBoundingClientRect().height,
-      });
-    };
-
-    window.addEventListener("resize", onResize);
-
-    return () => window.removeEventListener("resize", onResize);
-  }, [excalidrawWrapperRef]);
-
   const updateScene = () => {
     const sceneData = {
       elements: [
@@ -323,9 +319,6 @@ const App = () => {
         ref: excalidrawWrapperRef,
       },
       React.createElement(Excalidraw.default, {
-        ref: excalidrawRef,
-        width: dimensions.width,
-        height: dimensions.height,
         initialData: InitialData,
         onChange: (elements, state) =>
           console.log("Elements :", elements, "State : ", state),
@@ -348,28 +341,12 @@ To view the full example visit :point_down:
 
 [![Edit excalidraw-in-browser](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-in-browser-tlqom?fontsize=14&hidenavigation=1&theme=dark)
 
-Since Excalidraw doesn't support server side rendering yet so you will have to make sure the component is rendered once host is mounted.
-
-```js
-import { useState, useEffect } from "react";
-export default function IndexPage() {
-  const [Comp, setComp] = useState(null);
-  useEffect(() => {
-    import("@excalidraw/excalidraw").then((comp) => setComp(comp.default));
-  });
-  return <>{Comp && <Comp />}</>;
-}
-```
-
 </details>
 
-<details id="props">
-<summary><strong>Props</strong></summary>
+### Props
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| [`width`](#width) | Number | `window.innerWidth` | The width of Excalidraw component |
-| [`height`](#height) | Number | `window.innerHeight` | The height of Excalidraw component |
 | [`onChange`](#onChange) | Function |  | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw elements and the current app state. |
 | [`initialData`](#initialData) | <pre>{elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState<a> } </pre> | null | The initial data with which app loads. |
 | [`ref`](#ref) | [`createRef`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or [`callbackRef`](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) or <pre>{ current: { readyPromise: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317">resolvablePromise</a> } }</pre> |  | Ref to be passed to Excalidraw |
@@ -379,20 +356,18 @@ export default function IndexPage() {
 | [`onExportToBackend`](#onExportToBackend) | Function |  | Callback triggered when link button is clicked on export dialog |
 | [`langCode`](#langCode) | string | `en` | Language code string |
 | [`renderFooter `](#renderFooter) | Function |  | Function that renders custom UI footer |
+| [`renderCustomStats`](#renderCustomStats) | Function |  | Function that can be used to render custom stats on the stats dialog. |
 | [`viewModeEnabled`](#viewModeEnabled) | boolean |  | This implies if the app is in view mode. |
 | [`zenModeEnabled`](#zenModeEnabled) | boolean |  | This implies if the zen mode is enabled |
 | [`gridModeEnabled`](#gridModeEnabled) | boolean |  | This implies if the grid mode is enabled |
 | [`libraryReturnUrl`](#libraryReturnUrl) | string |  | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
 | [`theme`](#theme) | `light` or `dark` |  | The theme of the Excalidraw component |
 | [`name`](#name) | string |  | Name of the drawing |
+| [`UIOptions`](#UIOptions) | <pre>{ canvasActions: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L208"> CanvasActions<a/> }</pre> | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L129) | To customise UI options. Currently we support customising [`canvas actions`](#canvasActions) |
 
-#### `width`
+### Dimensions of Excalidraw
 
-This props defines the `width` of the Excalidraw component. Defaults to `window.innerWidth` if not passed.
-
-#### `height`
-
-This props defines the `height` of the Excalidraw component. Defaults to `window.innerHeight` if not passed.
+Excalidraw takes `100%` of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.
 
 #### `onChange`
 
@@ -464,7 +439,9 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the
 | getAppState | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState</a></pre> | Returns current appState |
 | history | `{ clear: () => void }` | This is the history API. `history.clear()` will clear the history |
 | setScrollToContent | <pre> (<a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>) => void </pre> | Scroll to the nearest element to center |
-| setCanvasOffsets | `() => void` | Updates the offsets for the Excalidraw component so that the coordinates are computed correctly (for example the cursor position). You should call this API when your app changes the dimensions/position of the Excalidraw container, such as when toggling a sidebar. You don't have to call this when the position is changed on page scroll (we handled that ourselves). |
+| refresh | `() => void` | Updates the offsets for the Excalidraw component so that the coordinates are computed correctly (for example the cursor position). You don't have to call this when the position is changed on page scroll or when the excalidraw container resizes (we handle that ourselves). For any other cases if the position of excalidraw is updated (example due to scroll on parent container and not page scroll) you should call this API. |
+| [importLibrary](#importlibrary) | `(url: string, token?: string) => void` | Imports library from given URL |
+| setToastMessage | `(message: string) => void` | This API can be used to show the toast with custom message. |
 
 #### `readyPromise`
 
@@ -523,6 +500,10 @@ import { defaultLang, languages } from "@excalidraw/excalidraw";
 
 A function that renders (returns JSX) custom UI footer. For example, you can use this to render a language picker that was previously being rendered by Excalidraw itself (for now, you'll need to implement your own language picker).
 
+#### `renderCustomStats`
+
+A function that can be used to render custom stats (returns JSX) in the nerd stats dialog. For example you can use this prop to render the size of the elements in the storage.
+
 #### `viewModeEnabled`
 
 This prop indicates whether the app is in `view mode`. When supplied, the value takes precedence over `intialData.appState.viewModeEnabled`, the `view mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
@@ -537,7 +518,7 @@ This prop indicates whether the shows the grid. When supplied, the value takes p
 
 #### `libraryReturnUrl`
 
-If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com). Default to `window.location.origin`. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
+If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com). Defaults to `window.location.origin + window.location.pathname`. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
 
 #### `theme`
 
@@ -547,10 +528,53 @@ This prop controls Excalidraw's theme. When supplied, the value takes precedence
 
 This prop sets the name of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over `intialData.appState.name`, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
 
-</details>
+### `UIOptions`
 
-<details id="extra-apis">
-<summary><strong>Extra API's</strong></summary>
+This prop can be used to customise UI of Excalidraw. Currently we support customising only [`canvasActions`](#canvasActions). It accepts the below parameters
+
+<pre>
+{ canvasActions: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L208"> CanvasActions<a/> }
+</pre>
+
+#### canvasActions
+
+| Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `changeViewBackgroundColor` | boolean | true | Implies whether to show `Background color picker` |
+| `clearCanvas` | boolean | true | Implies whether to show `Clear canvas button` |
+| `export` | boolean | true | Implies whether to show `Export button` |
+| `loadScene` | boolean | true | Implies whether to show `Load button` |
+| `saveAsScene` | boolean | true | Implies whether to show `Save as button` |
+| `saveScene` | boolean | true | Implies whether to show `Save button` |
+| `theme` | boolean | true | Implies whether to show `Theme toggle` |
+
+### Does it support collaboration ?
+
+No Excalidraw package doesn't come with collaboration, since this would have different implementations on the consumer so we expose the API's which you can use to communicate with Excalidraw as mentioned above. If you are interested in understanding how Excalidraw does it you can check it [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx).
+
+### importLibrary
+
+Imports library from given URL. You should call this on `hashchange`, passing the `addLibrary` value if you detect it as shown below. Optionally pass a CSRF `token` to skip prompting during installation (retrievable via `token` key from the url coming from [https://libraries.excalidraw.com](https://libraries.excalidraw.com/)).
+
+```js
+useEffect(() => {
+  const onHashChange = () => {
+    const hash = new URLSearchParams(window.location.hash.slice(1));
+    const libraryUrl = hash.get("addLibrary");
+    if (libraryUrl) {
+      excalidrawRef.current.importLibrary(libraryUrl, hash.get("token"));
+    }
+  };
+  window.addEventListener("hashchange", onHashChange, false);
+  return () => {
+    window.removeEventListener("hashchange", onHashChange);
+  };
+}, []);
+```
+
+Try out the [Demo](#Demo) to see it in action.
+
+### Extra API's
 
 #### `getSceneVersion`
 
@@ -595,8 +619,7 @@ import { getElementsMap } from "@excalidraw/excalidraw";
 
 This function returns an object where each element is mapped to its id.
 
-<details id="restore-utils">
-<summary><strong>Restore utilities</strong></summary>
+### Restore utilities
 
 #### `restoreAppState`
 
@@ -646,10 +669,7 @@ import { restore } from "@excalidraw/excalidraw";
 
 This function makes sure elements and state is set to appropriate values and set to default value if not present. It is combination of [restoreElements](#restoreElements) and [restoreAppState](#restoreAppState)
 
-</details>
-
-<details id="export-utils">
-<summary><strong>Export utilities</strong></summary>
+### Export utilities
 
 #### `exportToCanvas`
 
@@ -733,6 +753,3 @@ This function returns a svg with the exported elements.
 | viewBackgroundColor | string | #fff | The default background color |
 | shouldAddWatermark | boolean | false | Indicates whether watermark should be exported |
 | exportWithDarkMode | boolean | false | Indicates whether to export with dark mode |
-
-</details>
-</details>

src/packages/excalidraw/README_NEXT.md

@@ -0,0 +1,755 @@
+### Excalidraw
+
+Excalidraw exported as a component to directly embed in your projects.
+
+### Installation
+
+You can use npm
+
+```
+npm install react react-dom @excalidraw/excalidraw
+```
+
+or via yarn
+
+```
+yarn add react react-dom @excalidraw/excalidraw
+```
+
+After installation you will see a folder `excalidraw-assets` and `excalidraw-assets-dev` in `dist` directory which contains the assets needed for this app in prod and dev mode respectively.
+
+Move the folder `excalidraw-assets` and `excalidraw-assets-dev` to the path where your assets are served.
+
+By default it will try to load the files from `https://unpkg.com/@excalidraw/excalidraw/{currentVersion}/dist/`
+
+If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` depending on environment (for example if you have different URL's for dev and prod) to the url from where you want to load the assets.
+
+### Demo
+
+[Try here](https://codesandbox.io/s/excalidraw-ehlz3).
+
+### Usage
+
+#### Using Web Bundler
+
+If you are using a Web bundler (for instance, Webpack), you can import it as an ES6 module as shown below
+
+<details><summary><strong>View Example</strong></summary>
+
+```js
+import React, { useEffect, useState, useRef } from "react";
+import Excalidraw from "@excalidraw/excalidraw";
+import InitialData from "./initialData";
+
+import "./styles.scss";
+
+export default function App() {
+  const excalidrawRef = useRef(null);
+
+  const [viewModeEnabled, setViewModeEnabled] = useState(false);
+  const [zenModeEnabled, setZenModeEnabled] = useState(false);
+  const [gridModeEnabled, setGridModeEnabled] = useState(false);
+
+  const updateScene = () => {
+    const sceneData = {
+      elements: [
+        {
+          type: "rectangle",
+          version: 141,
+          versionNonce: 361174001,
+          isDeleted: false,
+          id: "oDVXy8D6rom3H1-LLH2-f",
+          fillStyle: "hachure",
+          strokeWidth: 1,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 100.50390625,
+          y: 93.67578125,
+          strokeColor: "#c92a2a",
+          backgroundColor: "transparent",
+          width: 186.47265625,
+          height: 141.9765625,
+          seed: 1968410350,
+          groupIds: [],
+        },
+      ],
+      appState: {
+        viewBackgroundColor: "#edf2ff",
+      },
+    };
+    excalidrawRef.current.updateScene(sceneData);
+  };
+
+  return (
+    <div className="App">
+      <h1> Excalidraw Example</h1>
+      <div className="button-wrapper">
+        <button className="update-scene" onClick={updateScene}>
+          Update Scene
+        </button>
+        <button
+          className="reset-scene"
+          onClick={() => {
+            excalidrawRef.current.resetScene();
+          }}
+        >
+          Reset Scene
+        </button>
+        <label>
+          <input
+            type="checkbox"
+            checked={viewModeEnabled}
+            onChange={() => setViewModeEnabled(!viewModeEnabled)}
+          />
+          View mode
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={zenModeEnabled}
+            onChange={() => setZenModeEnabled(!zenModeEnabled)}
+          />
+          Zen mode
+        </label>
+        <label>
+          <input
+            type="checkbox"
+            checked={gridModeEnabled}
+            onChange={() => setGridModeEnabled(!gridModeEnabled)}
+          />
+          Grid mode
+        </label>
+      </div>
+      <div className="excalidraw-wrapper">
+        <Excalidraw
+          ref={excalidrawRef}
+          initialData={InitialData}
+          onChange={(elements, state) => {
+            console.log("Elements :", elements, "State : ", state)
+          }
+          onPointerUpdate={(payload) => console.log(payload)}
+          onCollabButtonClick={() =>
+            window.alert("You clicked on collab button")
+          }
+          viewModeEnabled={viewModeEnabled}
+          zenModeEnabled={zenModeEnabled}
+          gridModeEnabled={gridModeEnabled}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+To view the full example visit :point_down:
+
+[![Edit excalidraw](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-ehlz3?fontsize=14&hidenavigation=1&theme=dark)
+
+</details>
+
+Since Excalidraw doesn't support server side rendering yet so you will have to make sure the component is rendered once host is mounted.
+
+```js
+import { useState, useEffect } from "react";
+export default function IndexPage() {
+  const [Comp, setComp] = useState(null);
+  useEffect(() => {
+    import("@excalidraw/excalidraw").then((comp) => setComp(comp.default));
+  });
+  return <>{Comp && <Comp />}</>;
+}
+```
+
+The `types` are available at `@excalidraw/excalidraw/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)
+
+#### In Browser
+
+To use it in a browser directly:
+
+For development use :point_down:
+
+```js
+<script
+  type="text/javascript"
+  src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.development.js"
+></script>
+```
+
+For production use :point_down:
+
+```js
+<script
+  type="text/javascript"
+  src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.production.min.js"
+></script>
+```
+
+You will need to make sure `react`, `react-dom` is available as shown in the below example. For prod please use the production versions of `react`, `react-dom`.
+
+<details><summary><strong>View Example</strong></summary>
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Excalidraw in browser</title>
+    <meta charset="UTF-8" />
+    <script src="https://unpkg.com/react@16.14.0/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
+
+    <script
+      type="text/javascript"
+      src="https://unpkg.com/@excalidraw/excalidraw@0.6.0/dist/excalidraw.development.js"
+    ></script>
+  </head>
+
+  <body>
+    <div class="container">
+      <h1>Excalidraw Embed Example</h1>
+      <div id="app"></div>
+    </div>
+    <script type="text/javascript" src="src/index.js"></script>
+  </body>
+</html>
+```
+
+```js
+/*eslint-disable */
+import "./styles.css";
+import InitialData from "./initialData";
+
+const App = () => {
+  const excalidrawRef = React.useRef(null);
+
+  const [viewModeEnabled, setViewModeEnabled] = React.useState(false);
+  const [zenModeEnabled, setZenModeEnabled] = React.useState(false);
+  const [gridModeEnabled, setGridModeEnabled] = React.useState(false);
+
+  const updateScene = () => {
+    const sceneData = {
+      elements: [
+        {
+          type: "rectangle",
+          version: 141,
+          versionNonce: 361174001,
+          isDeleted: false,
+          id: "oDVXy8D6rom3H1-LLH2-f",
+          fillStyle: "hachure",
+          strokeWidth: 1,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          angle: 0,
+          x: 100.50390625,
+          y: 93.67578125,
+          strokeColor: "#c92a2a",
+          backgroundColor: "transparent",
+          width: 186.47265625,
+          height: 141.9765625,
+          seed: 1968410350,
+          groupIds: [],
+        },
+      ],
+      appState: {
+        viewBackgroundColor: "#edf2ff",
+      },
+    };
+    excalidrawRef.current.updateScene(sceneData);
+  };
+
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      "div",
+      { className: "button-wrapper" },
+      React.createElement(
+        "button",
+        {
+          className: "update-scene",
+          onClick: updateScene,
+        },
+        "Update Scene",
+      ),
+      React.createElement(
+        "button",
+        {
+          className: "reset-scene",
+          onClick: () => excalidrawRef.current.resetScene(),
+        },
+        "Reset Scene",
+      ),
+      React.createElement(
+        "label",
+        null,
+        React.createElement("input", {
+          type: "checkbox",
+          checked: viewModeEnabled,
+          onChange: () => setViewModeEnabled(!viewModeEnabled),
+        }),
+        "View mode",
+      ),
+      React.createElement(
+        "label",
+        null,
+        React.createElement("input", {
+          type: "checkbox",
+          checked: zenModeEnabled,
+          onChange: () => setZenModeEnabled(!zenModeEnabled),
+        }),
+        "Zen mode",
+      ),
+      React.createElement(
+        "label",
+        null,
+        React.createElement("input", {
+          type: "checkbox",
+          checked: gridModeEnabled,
+          onChange: () => setGridModeEnabled(!gridModeEnabled),
+        }),
+        "Grid mode",
+      ),
+    ),
+    React.createElement(
+      "div",
+      {
+        className: "excalidraw-wrapper",
+        ref: excalidrawWrapperRef,
+      },
+      React.createElement(Excalidraw.default, {
+        initialData: InitialData,
+        onChange: (elements, state) =>
+          console.log("Elements :", elements, "State : ", state),
+        onPointerUpdate: (payload) => console.log(payload),
+        onCollabButtonClick: () => window.alert("You clicked on collab button"),
+        viewModeEnabled: viewModeEnabled,
+        zenModeEnabled: zenModeEnabled,
+        gridModeEnabled: gridModeEnabled,
+      }),
+    ),
+  );
+};
+
+const excalidrawWrapper = document.getElementById("app");
+
+ReactDOM.render(React.createElement(App), excalidrawWrapper);
+```
+
+To view the full example visit :point_down:
+
+[![Edit excalidraw-in-browser](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/excalidraw-in-browser-tlqom?fontsize=14&hidenavigation=1&theme=dark)
+
+</details>
+
+### Props
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| [`onChange`](#onChange) | Function |  | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw elements and the current app state. |
+| [`initialData`](#initialData) | <pre>{elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState<a> } </pre> | null | The initial data with which app loads. |
+| [`ref`](#ref) | [`createRef`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) or [`callbackRef`](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) or <pre>{ current: { readyPromise: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317">resolvablePromise</a> } }</pre> |  | Ref to be passed to Excalidraw |
+| [`onCollabButtonClick`](#onCollabButtonClick) | Function |  | Callback to be triggered when the collab button is clicked |
+| [`isCollaborating`](#isCollaborating) | `boolean` |  | This implies if the app is in collaboration mode |
+| [`onPointerUpdate`](#onPointerUpdate) | Function |  | Callback triggered when mouse pointer is updated. |
+| [`onExportToBackend`](#onExportToBackend) | Function |  | Callback triggered when link button is clicked on export dialog |
+| [`langCode`](#langCode) | string | `en` | Language code string |
+| [`renderFooter `](#renderFooter) | Function |  | Function that renders custom UI footer |
+| [`renderCustomStats`](#renderCustomStats) | Function |  | Function that can be used to render custom stats on the stats dialog. |
+| [`viewModeEnabled`](#viewModeEnabled) | boolean |  | This implies if the app is in view mode. |
+| [`zenModeEnabled`](#zenModeEnabled) | boolean |  | This implies if the zen mode is enabled |
+| [`gridModeEnabled`](#gridModeEnabled) | boolean |  | This implies if the grid mode is enabled |
+| [`libraryReturnUrl`](#libraryReturnUrl) | string |  | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
+| [`theme`](#theme) | `light` or `dark` |  | The theme of the Excalidraw component |
+| [`name`](#name) | string |  | Name of the drawing |
+| [`UIOptions`](#UIOptions) | <pre>{ canvasActions: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L208"> CanvasActions<a/> }</pre> | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L129) | To customise UI options. Currently we support customising [`canvas actions`](#canvasActions) |
+
+### Dimensions of Excalidraw
+
+Excalidraw takes `100%` of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.
+
+#### `onChange`
+
+Every time component updates, this callback if passed will get triggered and has the below signature.
+
+```js
+(excalidrawElements, appState) => void;
+```
+
+1.`excalidrawElements`: Array of [excalidrawElements](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) in the scene.
+
+2.`appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37) of the scene
+
+Here you can try saving the data to your backend or local storage for example.
+
+#### `initialData`
+
+This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
+
+| Name | Type | Descrption |
+| --- | --- | --- |
+| `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) | The elements with which Excalidraw should be mounted. |
+| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37) | The App state with which Excalidraw should be mounted. |
+| `scrollToContent` | boolean | This attribute implies whether to scroll to the nearest element to center once Excalidraw is mounted. By default, it will not scroll the nearest element to the center. Make sure you pass `initialData.appState.scrollX` and `initialData.appState.scrollY` when `scrollToContent` is false so that scroll positions are retained |
+
+```json
+{
+  "elements": [
+    {
+      "type": "rectangle",
+      "version": 141,
+      "versionNonce": 361174001,
+      "isDeleted": false,
+      "id": "oDVXy8D6rom3H1-LLH2-f",
+      "fillStyle": "hachure",
+      "strokeWidth": 1,
+      "strokeStyle": "solid",
+      "roughness": 1,
+      "opacity": 100,
+      "angle": 0,
+      "x": 100.50390625,
+      "y": 93.67578125,
+      "strokeColor": "#000000",
+      "backgroundColor": "transparent",
+      "width": 186.47265625,
+      "height": 141.9765625,
+      "seed": 1968410350,
+      "groupIds": []
+    }
+  ],
+  "appState": { "zenModeEnabled": true, "viewBackgroundColor": "#AFEEEE" }
+}
+```
+
+You might want to use this when you want to load excalidraw with some initial elements and app state.
+
+#### `ref`
+
+You can pass a `ref` when you want to access some excalidraw APIs. We expose the below APIs:
+
+| API | signature | Usage |
+| --- | --- | --- |
+| ready | `boolean` | This is set to true once Excalidraw is rendered |
+| readyPromise | [resolvablePromise](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317) | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readyPromise) |
+| updateScene | <pre>(<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L192">sceneData</a>)) => void </pre> | updates the scene with the sceneData |
+| resetScene | `({ resetLoadingState: boolean }) => void` | Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false. |
+| getSceneElementsIncludingDeleted | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a></pre> | Returns all the elements including the deleted in the scene |
+| getSceneElements | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a></pre> | Returns all the elements excluding the deleted in the scene |
+| getAppState | <pre> () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState</a></pre> | Returns current appState |
+| history | `{ clear: () => void }` | This is the history API. `history.clear()` will clear the history |
+| setScrollToContent | <pre> (<a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>) => void </pre> | Scroll to the nearest element to center |
+| refresh | `() => void` | Updates the offsets for the Excalidraw component so that the coordinates are computed correctly (for example the cursor position). You don't have to call this when the position is changed on page scroll or when the excalidraw container resizes (we handle that ourselves). For any other cases if the position of excalidraw is updated (example due to scroll on parent container and not page scroll) you should call this API. |
+| [importLibrary](#importlibrary) | `(url: string, token?: string) => void` | Imports library from given URL |
+| setToastMessage | `(message: string) => void` | This API can be used to show the toast with custom message. |
+
+#### `readyPromise`
+
+<pre>
+const excalidrawRef = { current: { readyPromise: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317">resolvablePromise</a>}}
+</pre>
+
+#### `onCollabButtonClick`
+
+This callback is triggered when clicked on the collab button in excalidraw. If not supplied, the collab dialog button is not rendered.
+
+#### `isCollaborating`
+
+This prop indicates if the app is in collaboration mode.
+
+#### `onPointerUpdate`
+
+This callback is triggered when mouse pointer is updated.
+
+```js
+({ x, y }, button, pointersMap}) => void;
+```
+
+1.`{x, y}`: Pointer coordinates
+
+2.`button`: The position of the button. This will be one of `["down", "up"]`
+
+3.`pointersMap`: [`pointers map`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L131) of the scene
+
+#### `onExportToBackend`
+
+This callback is triggered when the shareable-link button is clicked in the export dialog. The link button will only be shown if this callback is passed.
+
+```js
+(exportedElements, appState, canvas) => void
+```
+
+1. `exportedElements`: An array of [non deleted elements](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L87) which needs to be exported.
+2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37) of the scene.
+3. `canvas`: The `HTMLCanvasElement` of the scene.
+
+#### `langCode`
+
+Determines the language of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L14). Defaults to `en` (English). We also export default language and supported languages which you can import as shown below.
+
+```js
+import { defaultLang, languages } from "@excalidraw/excalidraw";
+```
+
+| name | type |
+| --- | --- |
+| defaultLang | string |
+| languages | [Language[]](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L8) |
+
+#### `renderFooter`
+
+A function that renders (returns JSX) custom UI footer. For example, you can use this to render a language picker that was previously being rendered by Excalidraw itself (for now, you'll need to implement your own language picker).
+
+#### `renderCustomStats`
+
+A function that can be used to render custom stats (returns JSX) in the nerd stats dialog. For example you can use this prop to render the size of the elements in the storage.
+
+#### `viewModeEnabled`
+
+This prop indicates whether the app is in `view mode`. When supplied, the value takes precedence over `intialData.appState.viewModeEnabled`, the `view mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
+
+#### `zenModeEnabled`
+
+This prop indicates whether the app is in `zen mode`. When supplied, the value takes precedence over `intialData.appState.zenModeEnabled`, the `zen mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
+
+#### `gridModeEnabled`
+
+This prop indicates whether the shows the grid. When supplied, the value takes precedence over `intialData.appState.gridModeEnabled`, the grid will be fully controlled by the host app, and users won't be able to toggle it from within the app.
+
+#### `libraryReturnUrl`
+
+If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com). Defaults to `window.location.origin + window.location.pathname`. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
+
+#### `theme`
+
+This prop controls Excalidraw's theme. When supplied, the value takes precedence over `intialData.appState.theme`, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app.
+
+#### `name`
+
+This prop sets the name of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over `intialData.appState.name`, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
+
+### `UIOptions`
+
+This prop can be used to customise UI of Excalidraw. Currently we support customising only [`canvasActions`](#canvasActions). It accepts the below parameters
+
+<pre>
+{ canvasActions: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L208"> CanvasActions<a/> }
+</pre>
+
+#### canvasActions
+
+| Attribute | Type | Default | Description |
+| --- | --- | --- | --- |
+| `changeViewBackgroundColor` | boolean | true | Implies whether to show `Background color picker` |
+| `clearCanvas` | boolean | true | Implies whether to show `Clear canvas button` |
+| `export` | boolean | true | Implies whether to show `Export button` |
+| `loadScene` | boolean | true | Implies whether to show `Load button` |
+| `saveAsScene` | boolean | true | Implies whether to show `Save as button` |
+| `saveScene` | boolean | true | Implies whether to show `Save button` |
+| `theme` | boolean | true | Implies whether to show `Theme toggle` |
+
+### Does it support collaboration ?
+
+No Excalidraw package doesn't come with collaboration, since this would have different implementations on the consumer so we expose the API's which you can use to communicate with Excalidraw as mentioned above. If you are interested in understanding how Excalidraw does it you can check it [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx).
+
+### importLibrary
+
+Imports library from given URL. You should call this on `hashchange`, passing the `addLibrary` value if you detect it as shown below. Optionally pass a CSRF `token` to skip prompting during installation (retrievable via `token` key from the url coming from [https://libraries.excalidraw.com](https://libraries.excalidraw.com/)).
+
+```js
+useEffect(() => {
+  const onHashChange = () => {
+    const hash = new URLSearchParams(window.location.hash.slice(1));
+    const libraryUrl = hash.get("addLibrary");
+    if (libraryUrl) {
+      excalidrawRef.current.importLibrary(libraryUrl, hash.get("token"));
+    }
+  };
+  window.addEventListener("hashchange", onHashChange, false);
+  return () => {
+    window.removeEventListener("hashchange", onHashChange);
+  };
+}, []);
+```
+
+Try out the [Demo](#Demo) to see it in action.
+
+### Extra API's
+
+#### `getSceneVersion`
+
+**How to use**
+
+<pre>
+import { getSceneVersion } from "@excalidraw/excalidraw";
+getSceneVersion(elements:  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>)
+</pre>
+
+This function returns the current scene version.
+
+#### `getSyncableElements`
+
+**_Signature_**
+
+<pre>
+getSyncableElements(elements:  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>):<a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>
+</pre>
+
+**How to use**
+
+```js
+import { getSyncableElements } from "@excalidraw/excalidraw";
+```
+
+This function returns all the deleted elements of the scene.
+
+#### `getElementMap`
+
+**_Signature_**
+
+<pre>
+getElementsMap(elements:  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>): {[id: string]: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement</a>}
+</pre>
+
+**How to use**
+
+```js
+import { getElementsMap } from "@excalidraw/excalidraw";
+```
+
+This function returns an object where each element is mapped to its id.
+
+### Restore utilities
+
+#### `restoreAppState`
+
+**_Signature_**
+
+<pre>
+restoreAppState(appState:  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L17">ImportedDataState["appState"]</a>, localAppState: Partial<<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState</a>> | null): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">AppState</a>
+</pre>
+
+**_How to use_**
+
+```js
+import { restoreAppState } from "@excalidraw/excalidraw";
+```
+
+This function will make sure all the keys have appropriate values in [appState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37) and if any key is missing, it will be set to default value. If you pass `localAppState`, `localAppState` value will be preferred over the `appState` passed in params.
+
+#### `restoreElements`
+
+**_Signature_**
+
+<pre>
+restoreElements(elements:  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L16">ImportedDataState["elements"]</a>): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>
+</pre>
+
+**_How to use_**
+
+```js
+import { restoreElements } from "@excalidraw/excalidraw";
+```
+
+This function will make sure all properties of element is correctly set and if any attribute is missing, it will be set to default value.
+
+#### `restore`
+
+**_Signature_**
+
+<pre>
+restoreElements(data:  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L12">ImportedDataState</a>): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L4">DataState</a>
+</pre>
+
+**_How to use_**
+
+```js
+import { restore } from "@excalidraw/excalidraw";
+```
+
+This function makes sure elements and state is set to appropriate values and set to default value if not present. It is combination of [restoreElements](#restoreElements) and [restoreAppState](#restoreAppState)
+
+### Export utilities
+
+#### `exportToCanvas`
+
+**_Signature_**
+
+<pre
+>exportToCanvas({
+  elements,
+  appState
+  getDimensions,
+}: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L10">ExportOpts</a>
+</pre>
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types) |  | The elements to be exported to canvas |
+| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L12) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L11) | The app state of the scene |
+| getDimensions | `(width: number, height: number) => {width: number, height: number, scale: number)` | `(width, height) => ({ width, height, scale: 1 })` | A function which returns the width, height and scale with which canvas is to be exported. |
+
+**How to use**
+
+```js
+import { exportToCanvas } from "@excalidraw/excalidraw";
+```
+
+This function returns the canvas with the exported elements, appState and dimensions.
+
+#### `exportToBlob`
+
+**_Signature_**
+
+<pre>
+exportToBlob(
+  opts: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L10">ExportOpts</a> & {
+  mimeType?: string,
+  quality?: number;
+})
+</pre>
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| opts |  |  | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exportToCanvas) |
+| mimeType | string | "image/png" | Indicates the image format |
+| quality | number | 0.92 | A value between 0 and 1 indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg`/`image/webp` MIME types. |
+
+**How to use**
+
+```js
+import { exportToBlob } from "@excalidraw/excalidraw";
+```
+
+Returns a promise which resolves with a [blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob). It internally uses [canvas.ToBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob).
+
+#### `exportToSvg`
+
+**_Signature_**
+
+<pre>
+exportToSvg({
+  elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78">ExcalidrawElement[]</a>,
+  appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42">AppState</a>,
+  exportPadding?: number,
+  metadata?: string,
+}
+</pre>
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) |  | The elements to exported as svg |
+| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L11) | The app state of the scene |
+| exportPadding | number | 10 | The padding to be added on canvas |
+| metadata | string | '' | The metadata to be embedded in svg |
+
+This function returns a svg with the exported elements.
+
+##### Additional attributes of appState for `export\*` APIs
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| exportBackground | boolean | true | Indicates whether background should be exported |
+| viewBackgroundColor | string | #fff | The default background color |
+| shouldAddWatermark | boolean | false | Indicates whether watermark should be exported |
+| exportWithDarkMode | boolean | false | Indicates whether to export with dark mode |

src/packages/excalidraw/index.tsx

@@ -10,11 +10,10 @@ import "../../css/styles.scss";
 import { ExcalidrawAPIRefValue, ExcalidrawProps } from "../../types";
 import { IsMobileProvider } from "../../is-mobile";
 import { defaultLang } from "../../i18n";
+import { DEFAULT_UI_OPTIONS } from "../../constants";
 
 const Excalidraw = (props: ExcalidrawProps) => {
   const {
-    width,
-    height,
     onChange,
     initialData,
     excalidrawRef,
@@ -30,8 +29,18 @@ const Excalidraw = (props: ExcalidrawProps) => {
     libraryReturnUrl,
     theme,
     name,
+    renderCustomStats,
   } = props;
 
+  const canvasActions = props.UIOptions?.canvasActions;
+
+  const UIOptions = {
+    canvasActions: {
+      ...DEFAULT_UI_OPTIONS.canvasActions,
+      ...canvasActions,
+    },
+  };
+
   useEffect(() => {
     // Block pinch-zooming on iOS outside of the content area
     const handleTouchMove = (event: TouchEvent) => {
@@ -54,8 +63,6 @@ const Excalidraw = (props: ExcalidrawProps) => {
     <InitializeApp langCode={langCode}>
       <IsMobileProvider>
         <App
-          width={width}
-          height={height}
           onChange={onChange}
           initialData={initialData}
           excalidrawRef={excalidrawRef}
@@ -71,6 +78,8 @@ const Excalidraw = (props: ExcalidrawProps) => {
           libraryReturnUrl={libraryReturnUrl}
           theme={theme}
           name={name}
+          renderCustomStats={renderCustomStats}
+          UIOptions={UIOptions}
         />
       </IsMobileProvider>
     </InitializeApp>
@@ -96,6 +105,7 @@ const areEqual = (
 
 Excalidraw.defaultProps = {
   lanCode: defaultLang.code,
+  UIOptions: DEFAULT_UI_OPTIONS,
 };
 
 const forwardedRefComp = forwardRef<

src/packages/excalidraw/main.js

@@ -0,0 +1,5 @@
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./dist/excalidraw.production.min.js");
+} else {
+  module.exports = require("./dist/excalidraw.development.js");
+}

src/packages/excalidraw/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.5.0",
-  "main": "dist/excalidraw.min.js",
+  "version": "0.6.0",
+  "main": "main.js",
+  "types": "types/packages/excalidraw/index.d.ts",
   "files": [
-    "dist/*"
+    "dist/*",
+    "types/*"
   ],
   "publishConfig": {
     "access": "public"
@@ -41,32 +43,34 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@babel/core": "7.13.10",
+    "@babel/core": "7.13.14",
     "@babel/plugin-transform-arrow-functions": "7.13.0",
     "@babel/plugin-transform-async-to-generator": "7.13.0",
     "@babel/plugin-transform-runtime": "7.13.10",
     "@babel/plugin-transform-typescript": "7.13.0",
-    "@babel/preset-env": "7.13.10",
-    "@babel/preset-react": "7.12.13",
+    "@babel/preset-env": "7.13.12",
+    "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
     "babel-loader": "8.2.2",
     "babel-plugin-transform-class-properties": "6.24.1",
     "cross-env": "7.0.3",
-    "css-loader": "5.1.3",
+    "css-loader": "5.2.0",
     "file-loader": "6.2.0",
-    "mini-css-extract-plugin": "1.3.9",
+    "mini-css-extract-plugin": "1.4.0",
     "sass-loader": "11.0.1",
     "terser-webpack-plugin": "5.1.1",
-    "ts-loader": "8.0.18",
-    "webpack": "5.27.1",
+    "ts-loader": "8.1.0",
+    "typescript": "4.2.3",
+    "webpack": "5.30.0",
     "webpack-bundle-analyzer": "4.4.0",
-    "webpack-cli": "4.5.0"
+    "webpack-cli": "4.6.0"
   },
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
   "repository": "https://github.com/excalidraw/excalidraw",
   "homepage": "https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw",
   "scripts": {
-    "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
+    "gen:types": "tsc --project ../../../tsconfig-types.json",
+    "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js && cross-env NODE_ENV=development webpack --config webpack.dev.config.js && yarn gen:types",
     "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
     "pack": "yarn build:umd && yarn pack"
   }

src/packages/excalidraw/webpack.dev.config.js

@@ -0,0 +1,81 @@
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = {
+  mode: "development",
+  devtool: false,
+  entry: {
+    "excalidraw.development": "./entry.js",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    library: "Excalidraw",
+    libraryTarget: "umd",
+    filename: "[name].js",
+    chunkFilename: "excalidraw-assets-dev/[name]-[contenthash].js",
+    publicPath: "",
+  },
+  resolve: {
+    extensions: [".js", ".ts", ".tsx", ".css", ".scss"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        exclude: /node_modules/,
+        use: ["style-loader", { loader: "css-loader" }, "sass-loader"],
+      },
+      {
+        test: /\.(ts|tsx|js|jsx|mjs)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+              configFile: path.resolve(__dirname, "../tsconfig.dev.json"),
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              name: "[name].[ext]",
+              outputPath: "excalidraw-assets-dev",
+            },
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    splitChunks: {
+      chunks: "async",
+      cacheGroups: {
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+        },
+      },
+    },
+  },
+  plugins: [new webpack.EvalSourceMapDevToolPlugin({ exclude: /vendor/ })],
+  externals: {
+    react: {
+      root: "React",
+      commonjs2: "react",
+      commonjs: "react",
+      amd: "react",
+    },
+    "react-dom": {
+      root: "ReactDOM",
+      commonjs2: "react-dom",
+      commonjs: "react-dom",
+      amd: "react-dom",
+    },
+  },
+};

src/packages/excalidraw/webpack.prod.config.js

@@ -6,7 +6,7 @@ const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
 module.exports = {
   mode: "production",
   entry: {
-    "excalidraw.min": "./entry.js",
+    "excalidraw.production.min": "./entry.js",
   },
   output: {
     path: path.resolve(__dirname, "dist"),
@@ -24,7 +24,13 @@ module.exports = {
       {
         test: /\.(sa|sc|c)ss$/,
         exclude: /node_modules/,
-        use: ["style-loader", { loader: "css-loader" }, "sass-loader"],
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+          },
+          "sass-loader",
+        ],
       },
       {
         test: /\.(ts|tsx|js|jsx|mjs)$/,

src/packages/excalidraw/yarn.lock

@@ -9,34 +9,33 @@
   dependencies:
     "@babel/highlight" "^7.12.13"
 
-"@babel/compat-data@^7.13.0", "@babel/compat-data@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.8.tgz#5b783b9808f15cef71547f1b691f34f8ff6003a6"
-  integrity sha512-EaI33z19T4qN3xLXsGf48M2cDqa6ei9tPZlfLdb2HC+e/cFtREiRd8hdSqDbwdLB0/+gLwqJmCYASH0z2bUdog==
+"@babel/compat-data@^7.13.0", "@babel/compat-data@^7.13.12", "@babel/compat-data@^7.13.8":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.13.12.tgz#a8a5ccac19c200f9dd49624cac6e19d7be1236a1"
+  integrity sha512-3eJJ841uKxeV8dcN/2yGEUy+RfgQspPEgQat85umsE1rotuquQ2AbIub4S6j7c50a2d+4myc+zSlnXeIHrOnhQ==
 
-"@babel/core@7.13.10":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.13.10.tgz#07de050bbd8193fcd8a3c27918c0890613a94559"
-  integrity sha512-bfIYcT0BdKeAZrovpMqX2Mx5NrgAckGbwT982AkdS5GNfn3KMGiprlBAtmBcFZRUmpaufS6WZFP8trvx8ptFDw==
+"@babel/core@7.13.14":
+  version "7.13.14"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.13.14.tgz#8e46ebbaca460a63497c797e574038ab04ae6d06"
+  integrity sha512-wZso/vyF4ki0l0znlgM4inxbdrUvCb+cVz8grxDq+6C9k6qbqoIJteQOKicaKjCipU3ISV+XedCqpL2RJJVehA==
   dependencies:
     "@babel/code-frame" "^7.12.13"
     "@babel/generator" "^7.13.9"
-    "@babel/helper-compilation-targets" "^7.13.10"
-    "@babel/helper-module-transforms" "^7.13.0"
+    "@babel/helper-compilation-targets" "^7.13.13"
+    "@babel/helper-module-transforms" "^7.13.14"
     "@babel/helpers" "^7.13.10"
-    "@babel/parser" "^7.13.10"
+    "@babel/parser" "^7.13.13"
     "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.0"
+    "@babel/traverse" "^7.13.13"
+    "@babel/types" "^7.13.14"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.1.2"
-    lodash "^4.17.19"
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/generator@^7.13.0", "@babel/generator@^7.13.9":
+"@babel/generator@^7.13.9":
   version "7.13.9"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.9.tgz#3a7aa96f9efb8e2be42d38d80e2ceb4c64d8de39"
   integrity sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==
@@ -60,12 +59,12 @@
     "@babel/helper-explode-assignable-expression" "^7.12.13"
     "@babel/types" "^7.12.13"
 
-"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.13.10", "@babel/helper-compilation-targets@^7.13.8":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.10.tgz#1310a1678cb8427c07a753750da4f8ce442bdd0c"
-  integrity sha512-/Xju7Qg1GQO4mHZ/Kcs6Au7gfafgZnwm+a7sy/ow/tV1sHeraRUHbjdat8/UvDor4Tez+siGKDk6zIKtCPKVJA==
+"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.13.10", "@babel/helper-compilation-targets@^7.13.13", "@babel/helper-compilation-targets@^7.13.8":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.13.tgz#2b2972a0926474853f41e4adbc69338f520600e5"
+  integrity sha512-q1kcdHNZehBwD9jYPh3WyXcsFERi39X4I59I3NadciWtNDyZ6x+GboOxncFK0kXlKIv6BJm5acncehXWUjWQMQ==
   dependencies:
-    "@babel/compat-data" "^7.13.8"
+    "@babel/compat-data" "^7.13.12"
     "@babel/helper-validator-option" "^7.12.17"
     browserslist "^4.14.5"
     semver "^6.3.0"
@@ -148,6 +147,13 @@
   dependencies:
     "@babel/types" "^7.13.0"
 
+"@babel/helper-member-expression-to-functions@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz#dfe368f26d426a07299d8d6513821768216e6d72"
+  integrity sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==
+  dependencies:
+    "@babel/types" "^7.13.12"
+
 "@babel/helper-module-imports@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz#ec67e4404f41750463e455cc3203f6a32e93fcb0"
@@ -155,20 +161,26 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
-"@babel/helper-module-transforms@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.13.0.tgz#42eb4bd8eea68bab46751212c357bfed8b40f6f1"
-  integrity sha512-Ls8/VBwH577+pw7Ku1QkUWIyRRNHpYlts7+qSqBBFCW3I8QteB9DxfcZ5YJpOwH6Ihe/wn8ch7fMGOP1OhEIvw==
+"@babel/helper-module-imports@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz#c6a369a6f3621cb25da014078684da9196b61977"
+  integrity sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==
   dependencies:
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.13.0"
-    "@babel/helper-simple-access" "^7.12.13"
+    "@babel/types" "^7.13.12"
+
+"@babel/helper-module-transforms@^7.13.0", "@babel/helper-module-transforms@^7.13.14":
+  version "7.13.14"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.13.14.tgz#e600652ba48ccb1641775413cb32cfa4e8b495ef"
+  integrity sha512-QuU/OJ0iAOSIatyVZmfqB0lbkVP0kDRiKj34xy+QNsnVZi/PA6BoSoreeqnxxa9EHFAIL0R9XOaAR/G9WlIy5g==
+  dependencies:
+    "@babel/helper-module-imports" "^7.13.12"
+    "@babel/helper-replace-supers" "^7.13.12"
+    "@babel/helper-simple-access" "^7.13.12"
     "@babel/helper-split-export-declaration" "^7.12.13"
     "@babel/helper-validator-identifier" "^7.12.11"
     "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.0"
-    lodash "^4.17.19"
+    "@babel/traverse" "^7.13.13"
+    "@babel/types" "^7.13.14"
 
 "@babel/helper-optimise-call-expression@^7.12.13":
   version "7.12.13"
@@ -211,6 +223,16 @@
     "@babel/traverse" "^7.13.0"
     "@babel/types" "^7.13.0"
 
+"@babel/helper-replace-supers@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz#6442f4c1ad912502481a564a7386de0c77ff3804"
+  integrity sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.13.12"
+    "@babel/helper-optimise-call-expression" "^7.12.13"
+    "@babel/traverse" "^7.13.0"
+    "@babel/types" "^7.13.12"
+
 "@babel/helper-simple-access@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.12.13.tgz#8478bcc5cacf6aa1672b251c1d2dde5ccd61a6c4"
@@ -218,6 +240,13 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
+"@babel/helper-simple-access@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz#dd6c538afb61819d205a012c31792a39c7a5eaf6"
+  integrity sha512-7FEjbrx5SL9cWvXioDbnlYTppcZGuCY6ow3/D5vMggb2Ywgu4dMrpTJX0JdQAIcRRUElOIxF3yEooa9gUb9ZbA==
+  dependencies:
+    "@babel/types" "^7.13.12"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz#462dc63a7e435ade8468385c63d2b84cce4b3cbf"
@@ -270,10 +299,19 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.12.13", "@babel/parser@^7.13.0", "@babel/parser@^7.13.10":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.10.tgz#8f8f9bf7b3afa3eabd061f7a5bcdf4fec3c48409"
-  integrity sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==
+"@babel/parser@^7.12.13", "@babel/parser@^7.13.13":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.13.tgz#42f03862f4aed50461e543270916b47dd501f0df"
+  integrity sha512-OhsyMrqygfk5v8HmWwOzlYjJrtLaFhF34MrfG/Z73DgYCI6ojNUTUp2TYbtnjo8PegeJp12eamsNettCQjKjVw==
+
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.13.12.tgz#a3484d84d0b549f3fc916b99ee4783f26fabad2a"
+  integrity sha512-d0u3zWKcoZf379fOeJdr1a5WPDny4aOFZ6hlfKivgK0LY7ZxNfoaHL2fWwdGtHyVvra38FC+HVYkO+byfSA8AQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.13.12"
 
 "@babel/plugin-proposal-async-generator-functions@^7.13.8":
   version "7.13.8"
@@ -359,10 +397,10 @@
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.8.tgz#e39df93efe7e7e621841babc197982e140e90756"
-  integrity sha512-hpbBwbTgd7Cz1QryvwJZRo1U0k1q8uyBmeXOSQUjdg/A2TASkhR/rz7AyqZ/kS8kbpsNA80rOYbxySBJAqmhhQ==
+"@babel/plugin-proposal-optional-chaining@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.12.tgz#ba9feb601d422e0adea6760c2bd6bbb7bfec4866"
+  integrity sha512-fcEdKOkIB7Tf4IxrgEVeFC4zeJSTr78no9wTdBuZZbqF64kzllU0ybo2zrzm7gUQfxGhBgq4E39oRs8Zx/RMYQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
@@ -672,23 +710,23 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-transform-react-jsx-development@^7.12.12":
-  version "7.12.16"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.16.tgz#af187e749d123b54ae49bc7e034057a0c1d4d568"
-  integrity sha512-GOp5SkMC4zhHwLbOSYhF+WpIZSf5bGzaKQTT9jWkemJRDM/CE6FtPydXjEYO3pHcna2Zjvg4mQ1lfjOR/4jsaQ==
+"@babel/plugin-transform-react-jsx-development@^7.12.17":
+  version "7.12.17"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.17.tgz#f510c0fa7cd7234153539f9a362ced41a5ca1447"
+  integrity sha512-BPjYV86SVuOaudFhsJR1zjgxxOhJDt6JHNoD48DxWEIxUCAMjV1ys6DYw4SDYZh0b1QsS2vfIA9t/ZsQGsDOUQ==
   dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.12.16"
+    "@babel/plugin-transform-react-jsx" "^7.12.17"
 
-"@babel/plugin-transform-react-jsx@^7.12.13", "@babel/plugin-transform-react-jsx@^7.12.16":
-  version "7.12.16"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.16.tgz#07c341e02a3e4066b00413534f30c42519923230"
-  integrity sha512-dNu0vAbIk8OkqJfGtYF6ADk6jagoyAl+Ks5aoltbAlfoKv8d6yooi3j+kObeSQaCj9PgN6KMZPB90wWyek5TmQ==
+"@babel/plugin-transform-react-jsx@^7.12.17", "@babel/plugin-transform-react-jsx@^7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.13.12.tgz#1df5dfaf0f4b784b43e96da6f28d630e775f68b3"
+  integrity sha512-jcEI2UqIcpCqB5U5DRxIl0tQEProI2gcu+g8VTIqxLO5Iidojb4d77q+fwGseCvd8af/lJ9masp4QWzBXFE2xA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.12.13"
+    "@babel/helper-module-imports" "^7.13.12"
+    "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-jsx" "^7.12.13"
-    "@babel/types" "^7.12.13"
+    "@babel/types" "^7.13.12"
 
 "@babel/plugin-transform-react-pure-annotations@^7.12.1":
   version "7.12.1"
@@ -784,15 +822,16 @@
     "@babel/helper-create-regexp-features-plugin" "^7.12.13"
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/preset-env@7.13.10":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.13.10.tgz#b5cde31d5fe77ab2a6ab3d453b59041a1b3a5252"
-  integrity sha512-nOsTScuoRghRtUsRr/c69d042ysfPHcu+KOB4A9aAO9eJYqrkat+LF8G1yp1HD18QiwixT2CisZTr/0b3YZPXQ==
+"@babel/preset-env@7.13.12":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.13.12.tgz#6dff470478290582ac282fb77780eadf32480237"
+  integrity sha512-JzElc6jk3Ko6zuZgBtjOd01pf9yYDEIH8BcqVuYIuOkzOwDesoa/Nz4gIo4lBG6K861KTV9TvIgmFuT6ytOaAA==
   dependencies:
-    "@babel/compat-data" "^7.13.8"
+    "@babel/compat-data" "^7.13.12"
     "@babel/helper-compilation-targets" "^7.13.10"
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/helper-validator-option" "^7.12.17"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.13.12"
     "@babel/plugin-proposal-async-generator-functions" "^7.13.8"
     "@babel/plugin-proposal-class-properties" "^7.13.0"
     "@babel/plugin-proposal-dynamic-import" "^7.13.8"
@@ -803,7 +842,7 @@
     "@babel/plugin-proposal-numeric-separator" "^7.12.13"
     "@babel/plugin-proposal-object-rest-spread" "^7.13.8"
     "@babel/plugin-proposal-optional-catch-binding" "^7.13.8"
-    "@babel/plugin-proposal-optional-chaining" "^7.13.8"
+    "@babel/plugin-proposal-optional-chaining" "^7.13.12"
     "@babel/plugin-proposal-private-methods" "^7.13.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.12.13"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
@@ -851,7 +890,7 @@
     "@babel/plugin-transform-unicode-escapes" "^7.12.13"
     "@babel/plugin-transform-unicode-regex" "^7.12.13"
     "@babel/preset-modules" "^0.1.4"
-    "@babel/types" "^7.13.0"
+    "@babel/types" "^7.13.12"
     babel-plugin-polyfill-corejs2 "^0.1.4"
     babel-plugin-polyfill-corejs3 "^0.1.3"
     babel-plugin-polyfill-regenerator "^0.1.2"
@@ -869,15 +908,16 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-react@7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.13.tgz#5f911b2eb24277fa686820d5bd81cad9a0602a0a"
-  integrity sha512-TYM0V9z6Abb6dj1K7i5NrEhA13oS5ujUYQYDfqIBXYHOc2c2VkFgc+q9kyssIyUfy4/hEwqrgSlJ/Qgv8zJLsA==
+"@babel/preset-react@7.13.13":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.13.13.tgz#fa6895a96c50763fe693f9148568458d5a839761"
+  integrity sha512-gx+tDLIE06sRjKJkVtpZ/t3mzCDOnPG+ggHZG9lffUbX8+wC739x20YQc9V35Do6ZAxaUc/HhVHIiOzz5MvDmA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/helper-validator-option" "^7.12.17"
     "@babel/plugin-transform-react-display-name" "^7.12.13"
-    "@babel/plugin-transform-react-jsx" "^7.12.13"
-    "@babel/plugin-transform-react-jsx-development" "^7.12.12"
+    "@babel/plugin-transform-react-jsx" "^7.13.12"
+    "@babel/plugin-transform-react-jsx-development" "^7.12.17"
     "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
 
 "@babel/preset-typescript@7.13.0":
@@ -905,25 +945,24 @@
     "@babel/parser" "^7.12.13"
     "@babel/types" "^7.12.13"
 
-"@babel/traverse@^7.12.13", "@babel/traverse@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.0.tgz#6d95752475f86ee7ded06536de309a65fc8966cc"
-  integrity sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==
+"@babel/traverse@^7.12.13", "@babel/traverse@^7.13.0", "@babel/traverse@^7.13.13":
+  version "7.13.13"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.13.13.tgz#39aa9c21aab69f74d948a486dd28a2dbdbf5114d"
+  integrity sha512-CblEcwmXKR6eP43oQGG++0QMTtCjAsa3frUuzHoiIJWpaIIi8dwMyEFUJoXRLxagGqCK+jALRwIO+o3R9p/uUg==
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.13.0"
+    "@babel/generator" "^7.13.9"
     "@babel/helper-function-name" "^7.12.13"
     "@babel/helper-split-export-declaration" "^7.12.13"
-    "@babel/parser" "^7.13.0"
-    "@babel/types" "^7.13.0"
+    "@babel/parser" "^7.13.13"
+    "@babel/types" "^7.13.13"
     debug "^4.1.0"
     globals "^11.1.0"
-    lodash "^4.17.19"
 
-"@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.4.4":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.0.tgz#74424d2816f0171b4100f0ab34e9a374efdf7f80"
-  integrity sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==
+"@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.13", "@babel/types@^7.13.14", "@babel/types@^7.4.4":
+  version "7.13.14"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.14.tgz#c35a4abb15c7cd45a2746d78ab328e362cbace0d"
+  integrity sha512-A2aa3QTkWoyqsZZFl56MLUsfmh7O0gN41IPvXAE/++8ojpbz12SszD7JEGYVdn4f9Kt4amIei07swF1h4AqmmQ==
   dependencies:
     "@babel/helper-validator-identifier" "^7.12.11"
     lodash "^4.17.19"
@@ -1091,22 +1130,22 @@
     "@webassemblyjs/ast" "1.11.0"
     "@xtuc/long" "4.2.2"
 
-"@webpack-cli/configtest@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.0.1.tgz#241aecfbdc715eee96bed447ed402e12ec171935"
-  integrity sha512-B+4uBUYhpzDXmwuo3V9yBH6cISwxEI4J+NO5ggDaGEEHb0osY/R7MzeKc0bHURXQuZjMM4qD+bSJCKIuI3eNBQ==
+"@webpack-cli/configtest@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.0.2.tgz#2a20812bfb3a2ebb0b27ee26a52eeb3e3f000836"
+  integrity sha512-3OBzV2fBGZ5TBfdW50cha1lHDVf9vlvRXnjpVbJBa20pSZQaSkMJZiwA8V2vD9ogyeXn8nU5s5A6mHyf5jhMzA==
 
-"@webpack-cli/info@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.2.2.tgz#ef3c0cd947a1fa083e174a59cb74e0b6195c236c"
-  integrity sha512-5U9kUJHnwU+FhKH4PWGZuBC1hTEPYyxGSL5jjoBI96Gx8qcYJGOikpiIpFoTq8mmgX3im2zAo2wanv/alD74KQ==
+"@webpack-cli/info@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.2.3.tgz#ef819d10ace2976b6d134c7c823a3e79ee31a92c"
+  integrity sha512-lLek3/T7u40lTqzCGpC6CAbY6+vXhdhmwFRxZLMnRm6/sIF/7qMpT8MocXCRQfz0JAh63wpbXLMnsQ5162WS7Q==
   dependencies:
     envinfo "^7.7.3"
 
-"@webpack-cli/serve@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.3.0.tgz#2730c770f5f1f132767c63dcaaa4ec28f8c56a6c"
-  integrity sha512-k2p2VrONcYVX1wRRrf0f3X2VGltLWcv+JzXRBDmvCxGlCeESx4OXw91TsWeKOkp784uNoVQo313vxJFHXPPwfw==
+"@webpack-cli/serve@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.3.1.tgz#911d1b3ff4a843304b9c3bacf67bb34672418441"
+  integrity sha512-0qXvpeYO6vaNoRBI52/UsbcaBydJCggoBBnIo/ovQQdn6fug0BgwsjorV1hVS7fMqGVTZGcVxv8334gjmbj5hw==
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
@@ -1426,12 +1465,7 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colorette@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
-  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
-
-colorette@^1.2.2:
+colorette@^1.2.1, colorette@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
@@ -1497,10 +1531,10 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-css-loader@5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.1.3.tgz#87f6fc96816b20debe3cf682f85c7e56a963d0d1"
-  integrity sha512-CoPZvyh8sLiGARK3gqczpfdedbM74klGWurF2CsNZ2lhNaXdLIUks+3Mfax3WBeRuHoglU+m7KG/+7gY6G4aag==
+css-loader@5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.0.tgz#a9ecda190500863673ce4434033710404efbff00"
+  integrity sha512-MfRo2MjEeLXMlUkeUwN71Vx5oc6EJnx5UQ4Yi9iUtYQvrPtwLUucYptz0hc6n++kdNcyF5olYBS4vPjJDAcLkw==
   dependencies:
     camelcase "^6.2.0"
     cssesc "^3.0.0"
@@ -2030,10 +2064,10 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mini-css-extract-plugin@1.3.9:
-  version "1.3.9"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.9.tgz#47a32132b0fd97a119acd530e8421e8f6ab16d5e"
-  integrity sha512-Ac4s+xhVbqlyhXS5J/Vh/QXUz3ycXlCqoCPpg0vdfhsIBH9eg/It/9L1r1XhSCH737M1lqcWnMuWL13zcygn5A==
+mini-css-extract-plugin@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.4.0.tgz#c8e571c4b6d63afa56c47260343adf623349c473"
+  integrity sha512-DyQr5DhXXARKZoc4kwvCvD95kh69dUupfuKOmBUqZ4kBTmRaRZcU32lYu3cLd6nEGXhQ1l7LzZ3F/CjItaY6VQ==
   dependencies:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
@@ -2535,10 +2569,10 @@ totalist@^1.0.0:
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
   integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
 
-ts-loader@8.0.18:
-  version "8.0.18"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.0.18.tgz#b2385cbe81c34ad9f997915129cdde3ad92a61ea"
-  integrity sha512-hRZzkydPX30XkLaQwJTDcWDoxZHK6IrEMDQpNd7tgcakFruFkeUp/aY+9hBb7BUGb+ZWKI0jiOGMo0MckwzdDQ==
+ts-loader@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.1.0.tgz#d6292487df279c7cc79b6d3b70bb9d31682b693e"
+  integrity sha512-YiQipGGAFj2zBfqLhp28yUvPP9jUGqHxRzrGYuc82Z2wM27YIHbElXiaZDc93c3x0mz4zvBmS6q/DgExpdj37A==
   dependencies:
     chalk "^4.1.0"
     enhanced-resolve "^4.0.0"
@@ -2551,6 +2585,11 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+typescript@4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
+  integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -2619,15 +2658,15 @@ webpack-bundle-analyzer@4.4.0:
     sirv "^1.0.7"
     ws "^7.3.1"
 
-webpack-cli@4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.5.0.tgz#b5213b84adf6e1f5de6391334c9fa53a48850466"
-  integrity sha512-wXg/ef6Ibstl2f50mnkcHblRPN/P9J4Nlod5Hg9HGFgSeF8rsqDGHJeVe4aR26q9l62TUJi6vmvC2Qz96YJw1Q==
+webpack-cli@4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.6.0.tgz#27ae86bfaec0cf393fcfd58abdc5a229ad32fd16"
+  integrity sha512-9YV+qTcGMjQFiY7Nb1kmnupvb1x40lfpj8pwdO/bom+sQiP4OBMKjHq29YQrlDWDPZO9r/qWaRRywKaRDKqBTA==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.0"
-    "@webpack-cli/configtest" "^1.0.1"
-    "@webpack-cli/info" "^1.2.2"
-    "@webpack-cli/serve" "^1.3.0"
+    "@webpack-cli/configtest" "^1.0.2"
+    "@webpack-cli/info" "^1.2.3"
+    "@webpack-cli/serve" "^1.3.1"
     colorette "^1.2.1"
     commander "^7.0.0"
     enquirer "^2.3.6"
@@ -2663,10 +2702,10 @@ webpack-sources@^2.1.1:
     source-list-map "^2.0.1"
     source-map "^0.6.1"
 
-webpack@5.27.1:
-  version "5.27.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.27.1.tgz#6808fb6e45e35290cdb8ae43c7a10884839a3079"
-  integrity sha512-rxIDsPZ3Apl3JcqiemiLmWH+hAq04YeOXqvCxNZOnTp8ZgM9NEPtbu4CaMfMEf9KShnx/Ym8uLGmM6P4XnwCoA==
+webpack@5.30.0:
+  version "5.30.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.30.0.tgz#07d87c182a060e0c2491062f3dc0edc85a29d884"
+  integrity sha512-Zr9NIri5yzpfmaMea2lSMV1UygbW0zQsSlGLMgKUm63ACXg6alhd1u4v5UBSBjzYKXJN6BNMGVM7w165e7NxYA==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.46"

src/packages/tsconfig.dev.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "esNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "sourceMap": true,
+    "allowJs": true
+  }
+}

src/packages/utils.ts

@@ -11,7 +11,7 @@ import { restore } from "../data/restore";
 type ExportOpts = {
   elements: readonly ExcalidrawElement[];
   appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
-  getDimensions: (
+  getDimensions?: (
     width: number,
     height: number,
   ) => { width: number; height: number; scale: number };
@@ -33,7 +33,7 @@ export const exportToCanvas = ({
   } = restoredAppState;
   return _exportToCanvas(
     getNonDeletedElements(restoredElements),
-    { ...restoredAppState, offsetTop: 0, offsetLeft: 0 },
+    { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
     { exportBackground, viewBackgroundColor, shouldAddWatermark },
     (width: number, height: number) => {
       const canvas = document.createElement("canvas");
@@ -83,7 +83,7 @@ export const exportToSvg = ({
   appState = getDefaultAppState(),
   exportPadding,
   metadata,
-}: ExportOpts & {
+}: Omit<ExportOpts, "getDimensions"> & {
   exportPadding?: number;
   metadata?: string;
 }): SVGSVGElement => {

src/packages/utils/CHANGELOG.md

@@ -5,3 +5,7 @@
 First release of `@excalidraw/utils` to provide utilities functions.
 
 - Added `exportToBlob` and `exportToSvg` to export an Excalidraw diagram definition, respectively, to a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) and to a [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement) ([#2246](https://github.com/excalidraw/excalidraw/pull/2246))
+
+### Features
+
+- Flip single elements horizontally or vertically [#2520](https://github.com/excalidraw/excalidraw/pull/2520)

src/packages/utils/package.json

@@ -34,23 +34,23 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "7.13.10",
+    "@babel/core": "7.13.14",
     "@babel/plugin-transform-arrow-functions": "7.13.0",
     "@babel/plugin-transform-async-to-generator": "7.13.0",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/plugin-transform-typescript": "7.13.0",
-    "@babel/preset-env": "7.13.10",
+    "@babel/preset-env": "7.13.12",
     "@babel/preset-typescript": "7.13.0",
     "babel-loader": "8.2.2",
     "babel-plugin-transform-class-properties": "6.24.1",
     "cross-env": "7.0.3",
-    "css-loader": "5.1.3",
+    "css-loader": "5.2.0",
     "file-loader": "6.2.0",
     "sass-loader": "11.0.1",
-    "ts-loader": "8.0.18",
-    "webpack": "5.27.1",
+    "ts-loader": "8.1.0",
+    "webpack": "5.30.0",
     "webpack-bundle-analyzer": "4.4.0",
-    "webpack-cli": "4.5.0"
+    "webpack-cli": "4.6.0"
   },
   "bugs": "https://github.com/excalidraw/excalidraw/issues",
   "repository": "https://github.com/excalidraw/excalidraw",